I have some thing like this:
window.App = Ember.Application.create();
App.Person = Ember.Object.extend({
id: null,
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') + " " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.selectedPersonController = Ember.Object.create({
person: null
});
App.selectedChildrenController = Ember.Object.create({
person: null
});
App.peopleController = Ember.ArrayController.create({
content: [
App.Person.create({
id: 1,
firstName: 'John',
lastName: 'Doe'
}),
App.Person.create({
id: 2,
firstName: 'Tom',
lastName: 'Cruise'
}),
App.Person.create({
id: 3,
firstName: 'Peter',
lastName: 'Pan'
}),
App.Person.create({
id: 4,
firstName: 'Sergey',
lastName: 'Brin'
})
]
});
App.childrenController = Ember.ArrayController.create({
children: [
App.Person.create({
person_id: 1,
firstName: 'Scott',
lastName: 'Hall'
}),
App.Person.create({
person_id: 1,
firstName: 'Jim',
lastName: 'Can'
}),
App.Person.create({
person_id: 2,
firstName: 'Will',
lastName: 'Smith'
}),
App.Person.create({
person_id: 4,
firstName: 'Bale',
lastName: 'Ron'
})
],
active: function() {
if (App.selectedPersonController.person) {
return this.get("children").filterProperty("person_id", App.selectedPersonController.person.id);
}
else {
return null;
}
}.property("App.selectedPersonController.person").cacheable()
});
window.App.Select = Ember.Select.extend({
contentChanged: function() {
this.$().selectBox('destroy').selectBox();
}.observes('content')
});
and my view code is something like this:
<script type="text/x-handlebars">
{{view window.App.Select
contentBinding="App.peopleController"
selectionBinding="App.selectedPersonController.person"
optionLabelPath="content.fullName"
optionValuePath="content.id"
prompt="Pick a person:"}}
{{view window.App.Select
contentBinding="App.childrenController.active"
selectionBinding="App.selectedChildrenController.person"
optionLabelPath="content.fullName"
optionValuePath="content.id"
prompt="Pick a child:"}}
<p>Selected: {{App.selectedPersonController.person.fullName}}
(ID: {{App.selectedPersonController.person.id}})</p>
</script>
I want my second window.App.Select to dynamically update depending on the selection in the first window.App.Select. I am using contentBinding="App.childrenController.active" for the second window.App.Select to make this work but what it does is that if I select a value in the person selectbox the child selectbox does not update, now when I select a different person from the person selectbox the child seletbox gets populated with the filtered values depending on my previous selection in the person select box.
Person selectbox -> select = John Doe (Nothing Happens)
Person selectbox -> select = Tom Cruise (Child select box gets filtered according to "John Doe" selection)
And so on.
Please see what is wrong with it.
