0

HTML テンプレートには Mustache を、レンダラーには HoganJS を使用しています。私の問題は次のとおりです。テーブル テンプレート (テーブル、ヘッダー、本文) がありますが、TBODY の各 TR 要素のテンプレートもあります。私が望むのは、TABLE テンプレートで TR テンプレートを再利用することだけです。

可能か不可能か？

サンプルコード:

<!-- Row Template -->
<script type="text/html" id="table_row_template">
<tr>
    <td><input type="text" name="Name" class="item-name autocomplete-groups" value="{{name}}" /></td>
    <td><input type="text" name="count" class="item-count count" name="count" value="{{count}}" /></td>
</tr>
</script>

<!-- Table Template -->
<script type="text/html" id="section_table_template">
<table>
    <thead>
        <tr><th>Name</th><th>Count</th></tr>
    </thead>
    <tbody>
        <!--
            Here I want ot iterate over the collection
                and render template from '#table_row_template'
        -->
    </tbody>
</table>

</script>

<script type="text/javascript">
    var context = {
        collection: {
            {
                "item1": { "name": "item1", "count": "1" },
                "item2": { "name": "item2", "count": "12" },
                "item3": { "name": "item3", "count": "5" },
                "item4": { "name": "item4", "count": "32" },
                "item5": { "name": "item5", "count": "6" },
            },

         ..........
        }
    }

    var t = hogan.compile(document.getElementById('section_table_template').innerHTML);
    var rendered = t.render(context);
</script>
4

1 に答える 1

2

あなたは口ひげの「部分的な」タグを探しています：

<script type="text/html" id="section_table_template">
<table>
    <thead>
        <tr><th>Name</th><th>Count</th></tr>
    </thead>
    <tbody>
        {{# collection }}
            {{> table_row }}
        {{/ collection }}
    </tbody>
</table>
</script>

これをホーガンで機能させるには、パーシャルがどこにあるかを伝える必要があります。

<script>
var t = hogan.compile(document.getElementById('section_table_template').innerHTML);
var partials = {
    table_row: document.getElementById('table_row_template').innerHTML
};
var rendered = t.render(context, partials);
</script>
于 2013-01-26T15:21:52.783 に答える