How to detect what changed in array in ember.js?

@jasen 

To detect what changed in an array in Ember.js, you can use the "ArrayObserver" functionality provided by Ember. Here is a step-by-step guide on how to do this:

1. Create an Ember array using Ember.ArrayProxy or Ember.ArrayController:

1
2
3

let array = Ember.ArrayProxy.create({
  content: ['item1', 'item2', 'item3']
});

1. Add an observer to the array using Ember.addObserver():

1
2
3
4
5
6
7
8

array.addArrayObserver({
  arrayWillChange: function(array, start, removeCount, addCount) {
    console.log("Array will change: ", array, start, removeCount, addCount);
  },
  arrayDidChange: function(array, start, removeCount, addCount) {
    console.log("Array did change: ", array, start, removeCount, addCount);
  }
});

1. Now, whenever the array is modified (items are added or removed), the observer functions will be triggered, and you can log the changes to the console.

1
2

array.pushObject('item4'); // This will trigger the observer
array.removeAt(0); // This will also trigger the observer

By using the Ember.ArrayObserver functionality, you can easily detect what changed in an array in Ember.js and take appropriate actions based on the changes.