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>

我希望我的第二个窗口.App.Select根据第一个窗口中的选择动态更新.App.Select。我正在使用 contentBinding =“App.childrenController.active”作为第二个window.App.Select来使这个工作，但它的作用是，如果我在人物选择框中选择一个值，子选择框会不更新，现在当我从人物选择框中选择一个不同的人时，子选择框会根据我在人员选择框中的先前选择填充过滤后的值。

人选择框 - ＆gt; select = John Doe（Nothing Happens）

人选择框 - ＆gt; select = Tom Cruise（根据“John Doe”选择过滤子选择框）

等等。

请看看它有什么问题。

Answer 1

我已经将所有内容重新组合在一起，试图将Rajat的死链接恢复到一个正常工作的jsbin，使用ember.js / 1.0.0-rc3实现此版本的链接或依赖选择框。

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

emberjs Ember.Select dynamic contentBinding

1 个答案: