ember-data-example

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  count: 1,
  post: Ember.computed(function() {
    var post = this.store.createRecord('post');
    post.get('comments').pushObject(
      this.store.createRecord('comment', {
      	text: 'comment 1'
    	})
    );
    post.get('comments').addObject(
      this.store.createRecord('comment', {
      	text: 'comment 2'
    	})
    );
    post.get('comments').addObject(
      this.store.createRecord('comment', {
      	text: 'comment 3'
    	})
    );
    
    return post;
  }),
  
  limited: Ember.computed('post.comments.[]', 'count', function() {
    return this.get('post.comments').slice(0, this.get('count'));
  }),
      
   actions: {
     setLimit() {
     	  this.set('count', 2);
     }
   }
});

models.comment.js

import DS from 'ember-data';

export default DS.Model.extend({
  post: DS.belongsTo('post'),
  text: DS.attr('string')
});

models.post.js

import DS from 'ember-data';

export default DS.Model.extend({
  comments: DS.hasMany('comment')
});

templates.application.hbs

All:
<ul>
{{#each post.comments as |comment|}}
	<li>{{comment.text}}</li>
{{/each}}
</ul>

Limited: <button {{action 'setLimit'}}>set</button>
<ul>
{{#each limited as |comment|}}
	<li>{{comment.text}}</li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}