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

我有一个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完成它？

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

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')
});

下面是一个完整的示例：

---

我会尝试在这些方面做更多的事情作为基础

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

然后你可以做的就是迭代有限的内容。您可以通过设置动态限制使其可扩展，如果您想更改其排序方式，它仍然有效。我以非常相似的方式处理分页。如果您想正确地处理排序，您可以更改为将内容获取到arrangedContent

---

这里有一个jsbin显示了这一点：

您可以使用ember composable helpers:object at helper来完成它

---

{{object at index array}

Hey，以及如何这样做sortProperties:['added']，sortAscending:false，将被考虑在内，以及如何这样做，以便我可以用h1设置第一项的样式，用h2设置第二项的样式，用h3设置第三项的样式？