window.App = Ember.Application.create({});
$(function () {
// Observe-e
App.Citizen = Ember.Object.extend({});
// Observer
App.Government = Ember.Object.extend({
// This is our 2D array
rows: Ember.A(),
// This just inits the 2D array with Citizen objects.
start: function () {
for (i = 0; i < 10; i++) {
var row = Ember.A();
for (j = 0; j < 10; j++) {
window.lastCitizen = App.Citizen.create({
name: 'Citizen ' + i + '-' + j
});
row.pushObject(window.lastCitizen);
}
this.get('rows').pushObject(row);
}
},
// The observer function that should fire whenever you press that button
spy: function () {
console.log("The Government observes");
}.observes('rows.@[email protected]')
});
// ----- unimportant stuff below here -----
$('#changeName').click(function () {
window.lastCitizen.set('name', 'Kevin' + Math.random() );
console.log('Changed name to ' + window.lastCitizen.get('name'));
});
});
App.IndexRoute = Ember.Route.extend({
setupController: function () {
var govt = App.Government.create();
govt.start();
},
});
Open your console window, then press:
<br />
<input type='button' id='changeName' value="Change citizen's name">
<br />If @each.@each worked, you'd see "The government observes" whenever you press this button.
External resources loaded into this fiddle: