Question

我有一个名为Course的Model，它有一个名为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'时，似乎总是出错。任何帮助或想法将不胜感激。非常感谢你！

Answer 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。

希望有所帮助

Answer 2

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

问题在于在ember中使用splice会修改基础数据：

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

splice从底层内容中删除元素。更好的方法是使用Ember的内置切片功能，将上面的代码改为

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/

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

2 个答案: