3

我有一个名为 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”时。任何帮助或想法将不胜感激。非常感谢！

4

2 回答 2

8

#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，显示了提到的概念。

希望能帮助到你

于 2013-06-16T16:33:06.637 回答
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/

于 2014-08-13T20:34:33.467 回答