Come aggiornare il contenuto di un ArrayController dal valore selezionato di un altro ArrayController in Ember.js

Question

Ho il seguente problema in ember.js. Un controller figlio dipende da un valore selezionato in un controller genitore al fine di determinarne il contenuto. Nel database un figlio ha un riferimento 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 
}); 

Preferirei risolvere questo problema senza che i genitori controllino qualcosa sugli altri controller. Questo dovrebbe essere possibile con osservatori, legature o anche attraverso calcoli ma non ho idea di dove cominciare. Qualsiasi aiuto sarebbe ben apprezzato.

Answer 1

È possibile utilizzare il sistema di rilegatura. sonsController deve osservare la proprietà parentsController.selected e quindi aggiornarne il contenuto.

Ecco un esempio di come si può fare:

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

E here is the jsfiddle associated.

N.B. : puoi anche associare direttamente la proprietà selezionata:

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

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