EmberJS Data handling

gistfile1.js

window.App = Ember.Application.create({});

Item = Ember.Object.extend({

});

App.ListController = Ember.ArrayController.create({

	content: [],
	currentItem: null,

	// Runs when the user clicks any of the items in the list
	itemClick: function(event) {

		var $target  = $(event.target || event.srcElement),
			id       = $target.data('itemId');

		for (var i = 0; i < this.content.length; i++) {
			if ( this.content[i].id == id ) {
				this.set('currentItem', this.content[i]);
			}
		}

		App.DetailController.load();

	},

	init: function() {
		// load data with ajax call
	},

	// Runs when the ajax call is done
	xhrLoadHandler: function(data) {

		var items = [];

		for (var i = 0; i < data.length; i++) {
			items.push( Item.create(data[i]) );
		}

		App.ListController.pushObjects( items );
		App.stateManager.goToState('list');
	}
});


App.DetailController = Ember.Object.create({

	dataBinding: 'App.ListController.currentItem',

	load: function() {
		App.stateManager.goToState('detail');
	},

	back: function() {
		App.stateManager.goToState('list');
	}

});


App.stateManager = Ember.StateManager.create({

	rootElement: '#main',

	list: Ember.ViewState.create({
		view: Ember.View.create({
			templateName: 'list'
		})
	}),

	detail: Ember.ViewState.create({
		view: Ember.View.create({
			templateName: 'detail',
			dataBinding: 'App.DetailController.data'
		})
	})

});