如何从Ember.js中另一个ArrayController的选定值更新一个ArrayController的内容

时间:2012-06-06 15:51:25

标签: javascript arrays binding ember.js observers

我在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必须知道其他控制器的情况下解决这个问题。这应该可以通过观察者,绑定甚至通过计算实现,但我不知道从哪里开始。任何帮助都将受到赞赏。

1 个答案:

答案 0 :(得分:6)

您可以使用绑定系统。 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')
})