live records vs live arrays test

controllers.application.js

import Ember from 'ember';
import { inject as service } from '@ember/service';

export default Ember.Controller.extend({
  appName: 'Live Arrays and Vs Normal Arrays, both with Ember Data records',
  store: service(),
  init() {
    let store = this.get('store');
    store.push({
      data: [{
        id: 1,
        type: 'widget',
        attributes: {
          foo: 1
        },
        relationships: {}
      }]
     });
    this.set('widgets', store.peekAll('widget'));
    this.set('widgets2', store.peekAll('widget').toArray());
  },
  actions: {
    updateRecord() {
      this.get('widgets.firstObject').set('foo', Math.floor(Math.random() * 10));
    },
    addRecord() {

    let store = this.get('store');
    store.push({
      data: [{
        id: Math.random(),
        type: 'widget',
        attributes: {
          foo: Math.floor(Math.random() * 10)
        },
        relationships: {}
      }]
     });
    }
  }
});

models.widget.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

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

templates.application.hbs

<h1>{{appName}}</h1>
<br>
<br>
{{outlet}}
<h3>widgets (live)</h3>
{{#each widgets as | widget |}}
  <div>foo: {{widget.foo}}</div>
{{/each}}
<h3>widgets2</h3>
{{#each widgets2 as | widget |}}
  <div>foo: {{widget.foo}}</div>
{{/each}}
<button {{action "updateRecord"}}>Update First Record</button>
<button {{action "addRecord"}}>Add a record</button>
<br>
<br>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}