Ember.js内の別のArrayControllerの選択された値から1つの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 
}); 

これを解決するには、parentsControllerが他のコントローラについて何も知る必要がありません。これはオブザーバー、バインディング、または計算でも可能ですが、どこから始めるべきかわかりません。どんな助けでも大歓迎です。

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') 
}); 

そしてhere is the jsfiddle associated：ここ

は、あなたがそれを行うことができる方法の一例です。

N.B. ：選択したプロパティを直接バインドすることもできます。

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

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