Ember.js emberjs Ember.选择动态内容绑定

我有这样的事情：

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 = 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>

{{view window.App.Select
contentBinding=“App.peopleController”
selectionBinding=“App.selectedPersonController.person”
optionLabelPath=“content.fullName”
optionValuePath=“content.id”
prompt=“挑选一个人：”}
{{view window.App.Select
contentBinding=“App.childrenController.active”
selectionBinding=“App.selectedChildrenController.person”
optionLabelPath=“content.fullName”
optionValuePath=“content.id”
prompt=“选择子项：”}
所选：{App.selectedPersonController.person.fullName}
（ID:{{App.selectedPersonController.person.ID}}）

​我希望我的第二个window.App.Select根据第一个window.App.Select中的选择动态更新。我正在为第二个window.App.Select使用contentBinding=“App.childrenController.active”，但它的作用是，如果我在person selectbox中选择一个值，则子selectbox不会更新，现在，当我从person selectbox中选择另一个人时，子seletbox将根据我在person selectbox中的上一次选择填充过滤值

Person selectbox->select=John Doe（没有发生任何事情）

Person selectbox->select=Tom Cruise（根据“John Doe”选择过滤子选择框）

等等

---

请看它有什么问题。

我将所有东西重新组合在一起，试图将Rajat的死链接恢复到一个工作的jsbin中，使用ember.js/1.0.0-rc3实现这个版本的链式或依赖式选择框