loops - 每个在 ember 和车把中都有索引和模数

Question

我正在创建一张幻灯片 - 所以每个 div 有 3 张图片，就像这样

<div>
  <img />
  <img />
  <img />
</div>

</div>
  <img />
  <img />
  <img />
</div>

互联网上的所有代码都没有完美运行 -

https://github.com/johanpoirier/resthub-backbone-stack/commit/8a318477d56c370d2a0af4da6eae9999c7bb29da

http://jaketrent.com/post/every-nth-item-in-handlebars-loop/

http://rockycode.com/blog/handlebars-loop-index/

http://www.arlocarreon.com/blog/javascript/handlebars-js-everyother-helper/

是的，包括堆栈溢出中的答案。

谁能提供一些在当前时期（Ember/Handlebar 版本）完美运行的代码？

我有一系列模型，所以我想做类似的事情

{{#each model}}
    {{if index % 3 == 0}}
    {{/if}}
{{/each}}

Answer 1

我一直在模板中发现index或@index不工作，但您可以从帮助程序中访问它。

我在这里做了一个例子来证明这一点：

http://jsbin.com/egoyay/1/edit

编辑：添加代码来回答，演示{{else}}块

车把助手（非 Ember 使用）：

Handlebars.registerHelper('ifIsNthItem', function(options) {
  var index = options.data.index + 1,
      nth = options.hash.nth;

  if (index % nth === 0) 
    return options.fn(this);
  else
    return options.inverse(this);
});

用法：

<ol>
 {{#each model}}
   <li>
     {{#ifIsNthItem nth=3}}
        Index is a multiple of 3
     {{else}}
        Index is NOT a multiple of 3
     {{/ifIsNthItem}}
   </li>
 {{/each}}
</ol>

Answer 2

如果您itemViewClass在each帮助程序中指定，那么它将为每个项目创建一个视图并设置 contentIndex 属性：

{{#each model itemViewClass="Ember.View"}}
    {{view.contentIndex}}
{{/each}} 

在 Ember v1.1.0 中测试