Ember.js模板中的增量

Question

我觉得我可能为一个简单的问题做了太多事情。

如果index = 0，在模板中如何递增index。

理想情况下，我想要像这样做。

{{index+1}}

据我所了解，解决方案是编写一个如下的辅助函数。

import Ember from 'ember';

export function plusOne(params) {
  return parseInt(params) + 1;
}

export default Ember.HTMLBars.makeBoundHelper(plusOne);

然后在模板中您需要执行以下操作。

{{plus-one index}}

希望有更简单的方法来完成这个任务，或者在模板中处理“简单”的操作也有更简单的方式。不确定是否会因为模板中包含太多逻辑而受到反对。如果有任何指导意见，将不胜感激。谢谢！

- user2517182

---

您在模板@user2517182中使用索引的用例是什么？ - Sushant

“在模板中进行‘简单’处理的可能更简单的方法。”这是不行的。Handlebars 模板被设计为无逻辑的。你应该在代码中进行任何和所有的处理。 - GJK

如果你有一个 stuff[] 数组，并且想在模板中在 stuff[0] 旁边显示数字 1，然后在 stuff[1] 旁边显示数字 2，以此类推... - user2517182

@GJK，这个{{index + 1}}的方法也是一样的吗？只是想确认一下是否有更好的方法。谢谢。 - user2517182

是的，这也适用于 {{index + 1}}。在模板中没有直接进行任何处理或计算的方法，您必须使用帮助程序或计算属性。 - GJK

Answer 1

简短的回答是不行的。在模板中无法进行任何真正的计算逻辑。使用helper是在模板中添加1到索引的最佳选择。

当然，人们会想知道为什么要将索引加1呢？可能是为了以非零基础的方式标记您的迭代？在这种情况下，您不会渲染有序列表吗？

<ol>
  {{#each model as |foo|}}
    <li>{{foo.bar}}</li>
  {{/each}}
</ol>

结果是：

1. 我是foo
2. 我也是foo！
3. 我是foo三！

---

另一种可能性是这样的（作为使用每个索引的帮助器的替代方法）

model: ['Foo', 'Man', 'Chu']

foosWithCount: Ember.computed.map('model', function(foo, index) {
  return Ember.Object.create({
    name: foo,
    count: index + 1
  });
});

那么

{{#each foosWithCount as |foo|}}
  <p>I'm {{foo.name}} and I'm #{{foo.count}}</p>
{{/each}}

导致结果是：

我是Foo，我排名第一

我是Man，我排名第二

我是Chu，我排名第三

- Grapho

---

谢谢你的答复。我认为有序列表可能会有一定的限制。我不能像这样做：foo is 1 in the array，foo too! 是2在数组中，foo three! 是3在数组中。但是我猜这就是为什么有帮助程序的原因了 :-) - user2517182

从Ember 1.11开始，您可以使用{{#each model as |foo index|}}来获取当前循环索引。 - GJK

Answer 2

在学习Ember时，我也曾经遇到过这个问题。我创建了一个gist，展示了如何使用一个非常简单的Handlebars助手方法解决这个问题。

只需要调用这个助手方法：{{your-helper-method index}}，它就会输出增加了1或其他你在助手方法中设置的增量的索引。请参考以下链接：https://gist.github.com/makabde/7d38d09d28b2a167b003。

- makabde

---

这真的解决了问题，我不知道为什么它没有更高的排名。这比其他任何解决方案都要好。感谢您的代码片段，节省了我很多时间！ - Vinay Raghu

Answer 3

如果需要在 each 块中访问索引，请使用：

<ul>
  {{#each model as |foo index|}}
   <li>{{index}} : {{foo.bar}}</li>
  {{/each}}
</ul>

参见：这个答案

然后，您可以使用模板助手将索引转换为位置。

JSBin示例

- Andre Helberg

Answer 4

我使用ember-composable-helpers inc helper。

{{#each model as |foo index|}}
  {{inc index}}
{{/each}}

- Ramil Gilfanov