I have a Model called Course that has an array variable called users. Is there a way to just limit the results of, let say, IDs from users rather than the {{#each}} rendering every single id?
Such that

<script type="text/x-handlebars" data-template-name="course">
{{#each user in users 5}} 
    {{user.name}}
{{/each}}
</script>

Will show the first 5 IDs rather than every single id stored in users?
Here is the Ember-data model that I am using

App.Course = DS.Model.extend({
  //Attributes
  name: DS.attr('string'),
  description: DS.attr('string'),
  //Relations
  users: DS.hasMany('App.User'),
});

I tried multiple times at creating a registerHelper, but where it always seems to go wrong is when an 'a in b' is present. Any help or ideas would be appreciated. Thank you very much!

I have a Model called Course that has an array variable called users. Is there a way to just limit the results of, let say, IDs from users rather than the {{#each}} rendering every single id?
Such that

<script type="text/x-handlebars" data-template-name="course">
{{#each user in users 5}} 
    {{user.name}}
{{/each}}
</script>

Will show the first 5 IDs rather than every single id stored in users?
Here is the Ember-data model that I am using

App.Course = DS.Model.extend({
  //Attributes
  name: DS.attr('string'),
  description: DS.attr('string'),
  //Relations
  users: DS.hasMany('App.User'),
});

I tried multiple times at creating a registerHelper, but where it always seems to go wrong is when an 'a in b' is present. Any help or ideas would be appreciated. Thank you very much!

• javascript
• html
• ember.js
• handlebars.js

2 Answers 2

Rather than modifying the #each helper you could take a different approach to show only a limited amount of items when looping over the array with the #each helper.

See this for a possible implementation:

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

The .property('content') defines a binding to the controller's content and takes care that the #each helper rerenders when the content changes.

And then in your template you loop over the limitedContent rather then the content:

<script type="text/x-handlebars" data-template-name="course">
  {{#each color in limitedContent}} 
    {{color.name}}
  {{/each}}
</script>

And here a working jsbin that show the concept mentioned.

Hope it helps

I was using the method in the accepted method, but ran into an issue with it.

The problem lay in that using splice in ember modifies the underlying data:

filtered: function() {
    return this.get('content').splice(0,2);
}.property('content'),

splice removes the elements from the underlying content. A better method is to use Ember's built-in slice function, changing the above code into

filtered: function() {
    return this.get('content').slice(0,2);
}.property('content'),

And that's it, now it doesn't modify the underlying array, because slice returns a new array and leaves the underlying data untouched.

JSBin showing that splice modifies underlying data: http://emberjs.jsbin./ridixawimugo/1/

JSBin with the fixed solution: http://emberjs.jsbin./voceye/1/