如何從Ember.js中另一個ArrayController的選定值更新一個ArrayController的內容

Question

我在ember.js中遇到以下問題。 子控制器依賴於父控制器中的選定值來確定其內容。 在數據庫中，子項具有parent_id引用。

App.parentsController = Em.ArrayController.create({
    content: [],
    selected: null
});

App.sonsController = Em.ArrayController.create({
    // the value of content depends on the id of
    // the selected item in the parentsController
    content: [], 
    selected: null
});

App.daughtersController = Em.ArrayController.create({
    // the value of content depends on the id of
    // the selected item in the parentsController
    content: [], 
    selected: null
});

我寧願在沒有parentController必須知道其他控制器的情況下解決這個問題。 這應該可以通過觀察者，綁定甚至通過計算實現，但我不知道從哪里開始。 任何幫助將不勝感激。

Answer 1

您可以使用綁定系統。 sonsController需要觀察parentsController.selected屬性，然后更新其內容。

以下是如何執行此操作的示例：

App.parentsController = Em.ArrayController.create({
    content: [],
    selected: null
});

App.sonsController = Em.ArrayController.create({
    parentControllerBinding: 'App.parentsController',
    content: [], 

    updateContent: function() {
        var selected = this.getPath('parentController.selected');
        var newContent = Ember.A();
        newContent.pushObject(selected);
        this.set('content', newContent);
    }.observes('parentController.selected')
});

這里是相關的jsfiddle 。

注意：您也可以直接綁定選定的屬性：

App.sonsController = Em.ArrayController.create({
    parentSelectedBinding: 'App.parentsController.selected',
      ...

    updateContent: function() {
       ...
    }.observes('parentSelected')
})