0

各ループ中にクラス名を変更したい。このようになります。

<div class="active">
  // do somthing
</div>
<div class="static">
  //do
</div>

私のコードは次のようになります

{{#each pages}}
  <div class="active">
    //do
  </div>
{{/each}}

クラスの識別子はありません。したがって、最初のアイテムがアクティブになり、残りのアイテムは静的になります。

4

2 に答える 2

1

テンプレート内でこれを行いたい場合は、独自のヘルパーを追加できます。このようなもの：

Handlebars.registerHelper('each_with_class', function(ary, first, rest, options) {
    if(!ary || ary.length == 0)
        return options.inverse(this);

    var result  = [ ];
    var context = null;
    var cls     = { cls: first };
    for(var i = 0; i < ary.length; ++i) {
        context = _({}).extend(ary[i], cls);
        result.push(options.fn(context));
        cls.cls = rest;
    }
    return result.join('');
});

次に、テンプレートは次のようになります。

{{#each_with_class pages "active" "static"}}
    <div class="{{cls}}">
        Same stuff you're doing now.
    </div>
{{/each_with_class}}

ary[i]途中で変更してもかまわない場合は、 を使用してコピーを作成するary[i].cls代わりに、に直接割り当てることができます。_.extend

デモ: http://jsfiddle.net/ambiguous/ZMSQh/1/

于 2012-10-24T01:47:15.020 に答える
0

私の知る限り、それによって提供されるインデックスを{{#each}}チェックすることはできません。

回避策は、このクラスをpagesアイテムに保存してから、次のようなものを使用することです。

{{#each pages}}
  <div class="{{this.classname}}">
    //do
  </div>
{{/each}}
于 2012-10-23T23:03:21.073 に答える