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

How to update content of one ArrayController from the selected value of another ArrayController in Ember.js

本文关键字：ArrayController 一个 另一个 更新 Ember js      更新时间：2023-09-26

我在余烬.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
});

我宁愿解决这个问题，而父控制器不必了解其他控制器的任何信息。这应该可以通过观察器、绑定甚至计算来实现，但我不知道从哪里开始。任何帮助将不胜感激。

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

这是相关的jsfiddle。

注意：您也可以直接绑定所选属性： 

App.sonsController = Em.ArrayController.create({
    parentSelectedBinding: 'App.parentsController.selected',
      ...
    updateContent: function() {
       ...
    }.observes('parentSelected')
})
相关文章：