javascript - 在 {{each items}} 期间主干更改类名称

Question

我想在每个循环期间更改类名；使它看起来像这样；

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

我的代码看起来像这样

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

没有类的标识符。所以第一个将是活动的，其余的项目将是静态的。

Answer 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/

Answer 2

据我所知，没有{{#each}}可以检查提供的索引..

一种解决方法是将此类存储在您的pages项目中，然后使用类似

{{#each pages}}
  <div class="{{this.classname}}">
    //do
  </div>
{{/each}}