16

次のようないくつかの反復で口ひげテンプレートをレンダリングするコードがあります。

{{#items}}
  some html code....
{{/items}}

しかし、次のように、レンダリングされるアイテムの数を反復に入れたいと思います:

{{#items}}
  This is the item [COUNTER-VAR]
{{/items}}

これを実行する方法はいくつかあります..??

4

4 に答える 4

16

ハンドルバーは不要になりました。現在の口ひげの上位セクションを使用できます。これらは基本的に、セクションの内容を引数として関数を呼び出すことができます。そのセクションが反復内にある場合、反復内の各項目に対して呼び出されます。

このテンプレートが与えられた場合 (便宜上 & 明確にするために script タグに保持されます)

<script type="text/html" id="itemview">
    <table width="100%" border="0" cellspacing="0" cellpadding="3">
        <tbody>
            {{#items}}
                <tr>
                    <td>{{#count}}unused{{/count}}</td>
                    <td>{{.}}</td
                </tr>
            {{/items}}
        </tbody>
    </table>
</script>

...そして次のコードで、番号付きリストを作成できます。

function buildPage(root)
{
    var counter = 0;
    var data = {
        'items': [ 'England', 'Germany', 'France' ],

        'count' : function () {
            return function (text, render) {
                // note that counter is in the enclosing scope
                return counter++;
            }
        }
    };

    // fetch the template from the above script tag
    var template = document.getElementById('itemview').innerHTML;
    document.getElementById("results").innerHTML = Mustache.to_html(template, data);
}

出力: 0 イギリス 1 ドイツ 2 フランス

于 2011-07-07T23:48:08.343 に答える
0

ハンドルバー拡張機能を使用して口ひげを生やし、カウンターをバンプするヘルパー関数を作成できます。

ここにさらに説明を入れます。 Mustache で、現在のセクションのインデックスを取得する方法

于 2011-02-22T03:23:27.010 に答える