Cách cập nhật nội dung của một ArrayController từ giá trị được chọn của một ArrayController khác trong Ember.js

Question

Tôi gặp vấn đề sau trong ember.js. Bộ điều khiển con phụ thuộc vào giá trị được chọn trong bộ điều khiển cha để xác định nội dung của nó. Trong cơ sở dữ liệu, một đứa trẻ có tham chiếu 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 
}); 

Tôi muốn giải quyết vấn đề này mà không cần cha mẹController phải biết bất kỳ điều gì về các bộ điều khiển khác. Điều này có thể xảy ra với các nhà quan sát, ràng buộc hoặc thậm chí thông qua tính toán nhưng tôi không biết phải bắt đầu từ đâu. Bất kỳ trợ giúp nào cũng sẽ được đánh giá cao.

Answer 1

Bạn có thể sử dụng hệ thống liên kết. sonsController cần quan sát thuộc tính parentsController.selected và sau đó cập nhật nội dung của nó.

Dưới đây là một ví dụ về cách bạn có thể làm điều đó:

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

Và here is the jsfiddle associated.

N.B. : bạn cũng có thể liên kết trực tiếp thuộc tính đã chọn:

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

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