Показать 3 элементов из массива в Ember.js

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> 

Как acomplish его с 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, 
}) 

Тогда что вы можете сделать, это перебрать ограниченный предмет. Вы можете сделать это доступным, установив динамический предел, и если вы хотите изменить способ его сортировки, он все равно будет эффективным. Я обрабатываю разбивку на страницы так же. Если вы хотите правильно обрабатывать сортировку, вы измените настройку содержимого на Контент.

Вот такой jsbin показывает это: JSBIN