更新一个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 
    }); 
}