更新一個observableArray而循環另一observableArray

Question

給定一個observableArray，由服務呼叫，其被用於呈現在視圖中複選框列表填充：

orgChart = ko.observableArray(); 

• 標識
• 系

另一個observableArray，由另一個服務填充，它返回從上面的數組中選擇（在數據庫中）的那些Departments的Id的列表。

selectedDepartment = ko.observableArray(); 

• 編號

我怎麼敲除綁定到第二陣列循環在第一時？

我試過這個，它顯示覆選框列表，但未能更新selectedDepartment數組。

<div data-bind="foreach: orgChart"> 
<div><input type="checkbox" data-bind="checked: selectedDepartment, value: Id }"/><span data-bind="text: Dept"/></div> 
</div> 

我猜我需要使用映射或計算值，但我找不到任何示例。

Answer 1

我的解決方案是隻有一個observableArray，而不是兩個。

將從2個服務調用中收到的數據合併到一個對象列表中。

例如，

var orgChart = getDataFromFirstServiceCall(); 
var selectedDepartments = getDataFromSecondServiceCall(); 

var vm = { 
    departments = ko.observableArray(), 
} 

function Department(id , name) { 
    this.id = id; 
    this.name = name; 
    this.selected = selectedDepartments.indexOf(id) !== -1; 
} 

for(var i = 0; i < orgChart.length; i++) { 
    var dept = orgChart[i]; 
    vm.departments.push(new Department(dept.id , dept.name); 
} 

ko.applyBindings(vm); 

現在在你的HTML你可以這樣做：

<div data-bind="foreach: departments"> 
    <div> 
     <input type="checkbox" data-bind="checked: selected }" /> 
     <span data-bind="text: name"/> 
    </div> 
</div> 

編輯：

要通過將數據發送回服務器，只需循環該部門陣列並抓取selected標誌設置爲true

var departments = vm.departments(), 
    selected = []; 
for(var i = 0; i < departments.length; i++) { 
    var dept = departments[i]; 
    if(dept.selected) selected.push(dept); 
} 

瞧！

或者如果您想要節省帶寬和/或刪除/插入語句到數據庫，您可以使selected成爲可觀察的，訂閱它的更改，然後單獨將其保存到服務器。

function Department(id , name) { 
    var self = this; 
    self.id = id; 
    self.name = name; 
    self.selected = ko.observable(selectedDepartments.indexOf(id) !== -1); 
    self.selected.subscribe(function(newValue) { 
     // save newValue to the database 
     // perform an ajax POST, sending self.id and newValue 
    }); 
}