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

Question

I have a source of data for Ember.js that has several items.

I can do:

{{each controller}}

{{name}}

{{/each}}

To display all names from this source and it works.

Now i would like to display only 3 of them, but since the template for each item is slightly different i would like to be able to do something like this:

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

How to acomplish it with Ember.js?

Answer 1

If it's only three items that you want to pull out, you can create a computed property for each of them:

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

Here's a full example:

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

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

Answer 2

I would try to do something more along these lines as a basis.

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

Then what you can do is iterate over the limitedContent. You can make this extensible by setting a dynamic limit, and if you wanted to change the way it's sorted, it will still be effective. I handle pagination in a very similar way. If you wanted to handle sorting properly, you would change to getting the content to arrangedContent.

Here's a jsbin showing this: JSBIN

Answer 3

You can do it with ember-composable-helpers: object-at helper

{{object-at index array}}