Ember.js KVO-compliant array of objects
Under the hood, Ember converts all arrays into an Ember.Array object. What this means is there are some things we have to do different if we want to manipulate it. In some cases, we can’t just use the the methods on a regular JavaScript array object, and in this particular post I will be talking about the pushObject method and Ember.MutableArray.
KVO-compliant stands for Key Value Observing compliant. What does this mean? Well think about Ember and how our template gets re-rendered every time one of our model or controller property changes or is being observed.
For example, you have an array, which is an object, and you add things to that array, the template won’t update with the new item in your array. Some code to demonstrate what I am describing:
// js
let arr = [1]// hbs
{{#each arr as |item|}}
{{item}}
{{/each}}// then we'll update arr
arr.push(2)// now arr = [1,2]
The first time the template renders, it will display 1 . But the next time I update arr , will the template re-render arr after the push? If you try it yourselves, you will see that it does not. Now why is this?
This is because arr is an object, and arr contains the reference to that object array. So when we push or manipulate the CONTENTS of the array, we are not changing the actual reference to the array object that is named arr .
This is where using the Ember.Array methods will help us. Under the hood, the pushObject method is updating the reference to the array and upholding the KVO-compliant rule.
So now, if we had this:
// js
let arr = [1]// hbs
{{#each arr as |item|}}
{{item}}
{{/each}}// then we'll update arr with the pushObject
arr.pushObject(2)// now arr = [1,2]
The template will update and display 1 and 2 . Alternatively, you can create a new array and set that new array to be the original thing you had in order to update the template, like this:
// js
let arr = [1]// hbs
{{#each arr as |item|}}
{{item}}
{{/each}}THEN:
// we want to update arr
let copy = [1,2]
arr = copy
This will effectively set a new reference to arr and Ember will be able to detect that the actual value of arr has changed and will update the template accordingly.

