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}}

主干在{{each items}}期间更改班级名称

2 个答案: