demo for brandon

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  initData: Ember.on('init',function(){
    // this would normally happen with the route model hook
    // when the data response comes back, this happens automatically behind the scenes
    this.store.pushPayload({yearbooks:[
    {id: 1, name: 'yearbook 1'},
    {id: 2, name: 'yearbook 2'},
    {id: 3, name: 'yearbook 3'}
    ]});
  }),
  count: 3,
  actions: {
    pushModel: function(){
      var records = {yearbooks: []};
      var count = this.get('count')
      for(var i = count; i < count + 3; i++){
        records.yearbooks.push({
          id: i,
          name: 'yearbook ' + i
        }); 
        console.log(i);
      }
      // this happens automatically when data is received
    	this.store.pushPayload(records);
      this.set('count', count+3)     
    }
  }
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params){
    // this method only looks for local records
    // normally we'd use find, which makes a network request
    return this.store.peekAll('yearbook');
  },
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<h2>yearbooks: </h2>
<button {{action 'pushModel'}}>add to model</button>
<ul>
{{#each model as |yearbook|}}
	<li>{{yearbook.name}}</li>
{{/each}}
</ul>
<br>
<br>

models.yearbook.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr()
});

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}