限制 {{#each a in b}} 的结果答案

【问题标题】：Limit the results of {{#each a in b}}限制 {{#each a in b}} 的结果
【发布时间】：2013-06-12 08:27:28
【问题描述】：

我有一个名为 Course 的模型，它有一个名为 users 的数组变量。有没有办法只限制来自用户的 ID 的结果，而不是 {{#each}} 呈现每个单独的 ID？
这样的

<script type="text/x-handlebars" data-template-name="course">
{{#each user in users 5}} 
    {{user.name}}
{{/each}}
</script>

将显示前 5 个 ID，而不是存储在用户中的每个 ID？
这是我正在使用的 Ember 数据模型

App.Course = DS.Model.extend({
  //Attributes
  name: DS.attr('string'),
  description: DS.attr('string'),
  //Relations
  users: DS.hasMany('App.User'),
});

我多次尝试创建 registerHelper，但似乎总是出错的地方是出现“a in b”时。任何帮助或想法将不胜感激。非常感谢！

【问题讨论】：

标签： javascript html ember.js handlebars.js

【解决方案1】：

除了修改 #each 帮助器之外，您还可以采用不同的方法在使用 #each 帮助器循环遍历数组时仅显示有限数量的项目。

查看这个可能的实现：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      Ember.Object.create({id:1, name:'Red'}),
      Ember.Object.create({id:2, name:'Green'}),
      Ember.Object.create({id:3, name:'Blue'})
    ];
  }
});

App.IndexController = Ember.ArrayController.extend({
  limitedContent: function() {
    return this.get('content').splice(0, 2);
  }.property('content')
});

.property('content') 定义了与控制器内容的绑定，并注意#each 助手在content 更改时重新呈现。

然后在您的模板中循环遍历limitedContent 而不是content：

<script type="text/x-handlebars" data-template-name="course">
  {{#each color in limitedContent}} 
    {{color.name}}
  {{/each}}
</script>

这里有一个有效的jsbin，显示了所提到的概念。

希望对你有帮助

【讨论】：

非常感谢！我什至没有想过要为此去找控制器。

【解决方案2】：

我正在使用接受方法中的方法，但遇到了问题。

问题在于在 ember 中使用 splice 会修改底层数据：

filtered: function() {
    return this.get('content').splice(0,2);
}.property('content'),

splice 从底层内容中移除元素。更好的方法是使用 Ember 内置的 slice 函数，将上面的代码改成

filtered: function() {
    return this.get('content').slice(0,2);
}.property('content'),

就是这样，现在它不会修改底层数组，因为 slice 返回一个新数组并保持底层数据不变。

JSBin 显示 splice 修改了底层数据： http://emberjs.jsbin.com/ridixawimugo/1/

JSBin 的固定解决方案： http://emberjs.jsbin.com/voceye/1/

【讨论】：