javascript - Ako aktualizovať obsah jedného ArrayController z vybranej hodnoty iného ArrayController v Ember.js

Mám nasledujúci problém v ember.js. Detský kontrolér závisí od vybranej hodnoty v rodičovskom kontroléri, aby mohol určiť svoj obsah. V databáze má dieťa odkaz 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
});

Radšej by som to vyriešil bez toho, aby parentsController musel čokoľvek vedieť o ostatných kontroléroch. Malo by to byť možné pomocou pozorovateľov, väzieb alebo dokonca výpočtov, ale nemám ani potuchy, kde začať. Akákoľvek pomoc by bola veľmi oceniteľná.

Odpoveď č. 1

Môžete použiť väzobný systém. sonsController potrebuje sledovať vlastnosť parentsController.selected a potom aktualizovať svoj obsah.

Tu je príklad, ako to môžete urobiť:

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

A tu je priradený jsfiddle.

Poznámka: môžete tiež priamo viazať vybranú vlastnosť:

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

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