Ember.Select动态contentBinding

Question

我有些事情是这样的：

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中的选择动态更新​。我使用contentBinding="App.childrenController.active"进行第二个window.App.Select来完成此工作，但是它所做的是，如果我在person选择框中选择一个值，子选择箱就不会更新，现在当我从person selectbox中选择一个不同的人时，子选择框将根据我在person选择框中的前一个选择来填充筛选过的值。

Person selectbox -> select = John (什么都没有发生)

Person selectbox -> select = Tom (根据"John“的选择过滤儿童选择框)

诸若此类。

请看看它有什么问题。

Answer 1

我再次将所有内容组合在一起，试图将Rajat的死链接还原到工作的jsbin中，使用ember.js/1.0.0-rc3实现这个版本的链接或依赖的选择框。

http://jsbin.com/ixogag/5/