模板中的 Emberjs 增量

Emberjs increment in the template

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

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

希望我是错的,并且有一种更简单的方法可以做到这一点。并且可能是在模板中进行 'simple' 处理的更简单方法。不确定是否有人反对,因为模板中可能有'to much'逻辑。

任何关于这方面的指导将不胜感激。

谢谢!

简短的回答是,不。无法在模板中执行任何真正的计算逻辑。助手是在模板中为索引加 1 的最佳选择。

当然,有人会想知道您为什么要向任何索引添加 +1?可能以基于非零的方式标记您的迭代?在那种情况下,你会不会渲染一个有序列表?

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

导致:

  1. 我是一个 foo
  2. 我也是个傻逼!
  3. 我是小三!

另一种可能性是(作为对每个索引使用助手的替代方法)

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,我是 #1

我是男人,我是#2

我是 Chu 我是 #3

如果您需要访问每个块中的索引,请使用:

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

参见:This Answer

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

JSBin Example

在学习 Ember 的过程中,我也为这个问题苦苦挣扎。我创建了一个要点,向您展示了如何使用非常简单的 Handlebars 辅助方法来完成此操作。

https://gist.github.com/makabde/7d38d09d28b2a167b003

然后你所要做的就是用{{your-helper-method index}}调用这个助手;然后它应该输出递增 1 的索引或您在辅助方法中设置的任何递增。

我用ember-composable-helpers inc hepler

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