我有这样的事情：
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')
});
我的视图代码是这样的：
<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>
我希望我的第二个 window.App.Select 根据第一个 window.App.Select 中的选择动态更新。我正在为第二个 window.App.Select 使用contentBinding="App.childrenController.active"来完成这项工作，但它的作用是，如果我在人员选择框中选择一个值，则子选择框不会更新，现在当我选择与人员选择框不同的人，子选择框会根据我之前在人员选择框中的选择填充过滤后的值。
人员选择框 -> 选择 = John Doe（什么都没有发生）
人员选择框 -> 选择 = Tom Cruise（子选择框根据“John Doe”选择进行过滤）
等等。
请看看它有什么问题。