8
मैं वर्तमान में दो डाटा मॉडल, जहां फू प्रकार बार्स का एक "toMany" संपत्ति के साथ काम कर रहा हूँ के बीच बाइंडिंग सामग्री। अब मैं दो चयन बक्से बनाने की कोशिश कर रहा हूं, जहां पहली बार फू के साथ आबादी ली जाती है, यह दूसरी सूची को केवल उस फू से जुड़े बार्स को परिशोधित करता है।EmberJS नियंत्रकों
यहाँ JSFiddle: नीचे http://jsfiddle.net/drew/6jLCy/
संहिता, लेकिन यह निश्चित रूप से काम नहीं करता। यह पहले के लिए SelectBox मानों को सेट करने तक जाता है, लेकिन संबंधित बार मान शीर्षक वाले दूसरे को पॉप्युलेट नहीं करता है। एचटीएमएल के लिए
App = Em.Application.create();
App.store = DS.Store.create({
revision: 7,
adapter: DS.fixtureAdapter
});
/**************************
* Models
**************************/
App.Foo = DS.Model.extend({
bars: DS.hasMany('App.Bar'),
title: DS.attr('string')
});
App.Bar = DS.Model.extend({
foos: DS.hasMany('App.Foo'),
title: DS.attr('string')
});
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: 0,
title: 'Footitle 1',
bars: [0,1]
},
{
id: 1,
title: 'Footitle 2',
bars: [0,1,2]
}
];
App.Bar.FIXTURES = [
{
id: 0,
title: 'Bartitle 1',
},{
id: 1,
title: 'Bartitle 2'
},{
id: 2,
title: 'Bartitle 3'
}
];
/**************************
* Views
**************************/
App.SetFooField = Em.Select.extend({
contentBinding: 'App.fooController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
App.SetBarField = Em.Select.extend({
contentBinding: 'App.barController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
/**************************
* Controllers
**************************/
App.fooController = Em.ArrayController.create({
content: App.store.findAll(App.Foo)
});
App.barController = Em.ArrayController.create({
contentBinding: 'App.fooController.selected.bars'
});
मार्कअप:
<script type="text/x-handlebars">
{{view App.SetFooField}}
{{view App.SetBarField}}
</script>