Question

我有Ember.js的数据来源，有几个项目。

我能做到：

{{each controller}}

{{name}}

{{/each}}

要显示此来源的所有名称，它都有效。

现在我想只显示其中的3个，但由于每个项目的模板略有不同，我希望能够做到这样的事情：

<h1>{{name of first item}}</h1>
<h2>{{name of second item}} </h2>
<h3>{{name of third item}}</h2>

如何用Ember.js来完成它？

Answer 1

如果只想提取三个项目，可以为每个项目创建一个计算属性：

App.IndexController = Ember.ArrayController.extend({
  firstItem: function() {
    return this.get('model').objectAt(0);
  }.property('model'),

  secondItem: function() {
    return this.get('model').objectAt(1);
  }.property('model'),

  thirdItem: function() {
    return this.get('model').objectAt(2);
  }.property('model')
});

以下是一个完整的例子：

http://emberjs.jsbin.com/fibaha/1/edit?html,js,output

http://emberjs.com/api/classes/Ember.Array.html#method_objectAt

Answer 2

我会尝试以这些方式做更多的事情作为基础。

Ember.ArrayController.extend({
  limitedContent: function(){
    return this.get('content').slice(0, 3);
  }.property('content.[]'),
  sortProperties: ['color'],
  sortAscending: false,
})

然后你可以做的是迭代有限的内容。您可以通过设置动态限制来实现此扩展，如果您想要更改其排序方式，它仍然有效。我以非常类似的方式处理分页。如果您想要正确处理排序，您可以更改为将内容添加到arrangeContent。

这是一个显示此内容的jsbin：JSBIN

Answer 3

你可以用ember-composable-helpers：object-at helper

来做

在Ember.js中显示数组中的3个项目

3 个答案: