sample.js

// ==========================================================================
// Project:   Sample
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals Sample */

Sample = SC.Application.create({
	store: SC.Store.create().from(SC.Record.fixtures)
});

/* == MODELS == */
Sample.Parent = SC.Record.extend({
	name: SC.Record.attr(String),
	children: SC.Record.toMany('Sample.Child')
});
Sample.Parent.FIXTURES = [
	{ "guid" : 1, "name" : "Parent 1", "children" : [1,2] },
	{ "guid" : 2, "name" : "Parent 2", "children" : [3,4] }
];
Sample.Child = SC.Record.extend({
	name: SC.Record.attr(String)
});
Sample.Child.FIXTURES = [
	{ "guid" : 1, "name" : "Child 1" },
	{ "guid" : 2, "name" : "Child 2" },
	{ "guid" : 3, "name" : "Child 3" },
	{ "guid" : 4, "name" : "Child 4" }
];

/* == Controllers == */
Sample.parentsController = SC.ArrayController.create({
	allowsEmptySelection: NO
});
Sample.parentController = SC.ObjectController.create({
	contentBinding: 'Sample.parentsController.selection'
});
Sample.childrenController = SC.ArrayController.create({
	allowsEmptySelection: NO,
	contentBinding: 'Sample.parentController.children'
});
Sample.childController = SC.ObjectController.create({
	contentBinding: 'Sample.childrenController.selection'
});

SC.ready(function() {
	Sample.parentsController.set('content', Sample.store.find(Sample.Parent));
	Sample.mainPane = SC.TemplatePane.append({
		// When bound to parentController, we render a parent name
		// but when we bind to the childController, we don't get
		// a child name.
		
		// modelBinding: 'Sample.parentController',
		// or
		modelBinding: 'Sample.childController',
		
		template: SC.Handlebars.compile('Hello, {{model.name}}')
  	});
});