gistfile1.txt

//List view is my group Fixture
sc_require('models/list');

Demo.List.FIXTURES = [

 	{ 	guid: 1, listDescription: "Basics"},

	{ 	guid: 2, listDescription: "Run Time"},

	{ 	guid: 3, listDescription: "JavaScript Basics"},

	{ 	guid: 4,listDescription: "UI Views"},
	
	{ 	guid: 5,listDescription: "Foundations"},
	
	{ 	guid: 6,listDescription: "Animation"},
];
	
//SubList is my childview that I want to populate based on selection

sc_require('models/sub_list');

Demo.SubList.FIXTURES = [
	
	{ 	guid: 1, 
		title: "Intro",
		pageLocation:"points to a Page",
		group: 1
	},
	{ 	guid: 2, 
		title: "Quick",
		pageLocation:"points to a Page",
		group: 1
	},
	{ 	guid: 3, 
		title: "Arch",
		pageLocation:"points to a Page",
		group: 1
	},
	{ 	guid: 4, 
		title: "Design",
		pageLocation:"points to a Page",
		group: 1
	},
	//
	{ 	guid: 5, 
		title: "Over",
		pageLocation:"points to a Page",
		group: 2
	},
	{ 	guid: 6, 
		title: "Obj",
		pageLocation:"points to a Page",
		group: 2
	},
	{ 	guid: 7, 
		title: "Mix",
		pageLocation:"points to a Page",
		group: 2
	},
	{ 	guid: 8, 
		title: "Key",
		pageLocation:"points to a Page",
		group: 2
	},
	{ 	guid: 9, 
		title: "Test",
		pageLocation:"points to a Page",
		group: 3
	}

];

//List Model
Demo.List = SC.Record.extend({
listDescription: SC.Record.attr(String),
}) ;

//SubList Model
Demo.SubList = SC.Record.extend({
	title: 	SC.Record.attr(String),
	pageLocation: SC.Record.attr(String),
	group:     SC.Record.toOne("Demo.List")

}) ;


//Controller
Demo.appController = SC.ArrayController.create({
	nowShowing: 'mainList',

}) ;

Demo.selectController =  SC.ObjectController.create({
	contentBinding: 'Demo.appController.selection',
	contentBindingDefault: SC.Binding.single(),
	
	
});



//2 List Views
	mainList: SC.ScrollView.design({
		//backgroundColor:"white",
		layout: {top:96,bottom:96, width:300},
		//backgroundColor:"white",
		contentView:
		 SC.ListView.design(SC.Animatable,{
			transitions: {
		          left: { duration: .25, timing: SC.Animatable.TRANSITION_CSS_EASE },
		          	top: .25, // duration as the default argument
		          width: .25,
		          opacity: { duration: 1.0 }
		     	},
		
			contentBinding: 'Demo.appController.arrangedObjects',
			contentValueKey: "title",
			//actOnSelect:YES,
			//action: "basic",
			//target: "Demo.mainPage.mainPane",
			//hasContentIcon:  YES,
			//contentIconKey: "icon",
			rowHeight: 54,
			selectionBinding: 'Demo.appController.selection'
		})
		}),
	secondList: SC.ScrollView.design(SC.Animatable,{
		layout: {left:350,top:96,bottom:96, width:300},
		
		contentView:
		 SC.ListView.design(SC.Animatable,{
			layout:{left:0,width:300},
			transitions: {
		          left: { duration: .25, timing: SC.Animatable.TRANSITION_CSS_EASE },
		          	top: .25, // duration as the default argument
		          width: .25,
		          opacity: { duration: 1.0 }
		     	},
			contentBinding: 'Demo.appController.arrangedObjects',
			contentValueKey: 'group',
			//hasContentIcon:  YES,
			//contentIconKey: "icon",
			rowHeight: 54,
			actOnSelect:YES,
			action: "basic",
			target: "Demo.mainPage.mainPane",
			//target:'Demo.mainPage.mainPane',
			selectionBinding: 'Demo.appController.selection'
		})
		}),