javascript - computed - ember filter

Cómo actualizar el contenido de un ArrayController desde el valor seleccionado de otro ArrayController en Ember.js

Question

Tengo el siguiente problema en ember.js. Un controlador secundario depende de un valor seleccionado en un controlador principal para determinar su contenido. En la base de datos, un niño tiene una referencia 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
});

Preferiría resolver esto sin que los padresController tengan que saber nada sobre los otros controladores. Esto debería ser posible con observadores, enlaces o incluso a través de cálculos, pero no tengo ni idea de por dónde empezar. Cualquier ayuda sería bien apreciada.

Answer 1

Puedes usar el sistema de enlace. El sonsController tiene que observar la propiedad parentsController.selected y luego actualizar su contenido.

Aquí hay un ejemplo de cómo puedes hacer eso:

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

Y aquí está el jsfiddle asociado .

NB: también podría vincular directamente la propiedad seleccionada:

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

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