如何將子集合綁定到不同的複選框列表中

我有這個頁面包含一個項目。每個項目都有成員，每個成員可以有一個或多個角色。我想展示某種「選擇列表」，其中所有分配的角色都被「檢查」，並且可以在每個成員中添加或刪除角色，同時讓模型更新以反映這些更改。

我已經創建了一個簡單的http://jsfiddle.net/vinblad/PhQRr/1/來演示我在做什麼，但正如我所說的，我沒有線索知道如何解決這個問題，所以任何幫助都會很棒！

這裏的視圖模型代碼：

var viewModel = new function() { 
    var self = this; 
    self.project = ko.observable(); 
    self.roles = ko.observable(); 
}; 

viewModel.load = function() { 
    var data = {"project":{"members":[{"member":{"name":"Vinblad 
    Anders","id":13,"isDeleted":false},"roles":[{"name":"Editor","id":1, 
    "isDeleted":false},{"name":"Admin","id":2,"isDeleted":false}],"id":1},{"member": 
    {"name":"Gramer Mikael","id":14,"isDeleted":false},"roles": 
    [{"name":"Reader","id":1,"isDeleted":false}],"id":2}],"name":"Project 
    XYZ","number":338,"id":1},"roles":[{"name":"Admin","id":1,"isDeleted":false}, { 
    "name":"Editor","id":2,"isDeleted":false}, { 
    "name":"Reader","id":3,"isDeleted":false}]} 
    viewModel.loadView(data); 
}; 
viewModel.loadView = function(data) { 
    viewModel.project(data.project); 
    viewModel.roles(data.roles); 
    ko.applyBindings(viewModel);  
}; 

viewModel.load();

在此示例中的數據是硬編碼，在現實中的數據來自一個web服務，我使用knockoutjs.mapping插件。

來源

2012-11-15 Vinblad

我沒有看到問題，它甚至沒有遞歸，因爲你說，如果項目的孩子有一個項目作爲成員，那麼它將遞歸。

創建4周的ViewModels具有ProjectViewModel的陣列，其具有MemberViewModel的陣列，其具有RoleViewModel

的陣列

或者只是使用自動生成的ViewModels從映射插件 http://jsfiddle.net/Ed8Fv/

ko.applyBindings(ko.mapping.fromJS(data));

來源

2012-11-15 11:32:54 Anders

你說得對，我改變了問題的標題。但是，我不知道這將如何與映射插件。通過執行多個視圖模型，我不需要執行大量手動映射來反映更改嗎？ – Vinblad

通常你需要明確指定你是ViewModels，因爲你需要額外的業務邏輯。我用一種不需要顯式模型的解決方案編輯我的答案 – Anders

我一個EditProjectMembersViewModel已經發布了一個非常基本的例子，如何create a checkbox list with knockout。我的例子沒有像前面提到的那樣動態添加角色的能力。不過，你應該可以用observableArray來做到這一點。

來源

2013-08-18 13:18:48

如何將子集合綁定到不同的複選框列表中

回答

相關問題