在循环另一个 observableArray 时更新一个 observableArray

Question

给定一个由服务调用填充的 observableArray，用于在视图中呈现复选框列表：

orgChart = ko.observableArray();

• 身份证
• 部门

还有另一个 observableArray，由另一个服务填充，它返回从上述数组中选择（在数据库中）的那些部门的 ID 列表。

selectedDepartment = ko.observableArray();

• 身份证

在循环第一个数组时，我如何将淘汰赛绑定到第二个数组？

我试过这个，它呈现 Checkbox 列表，但无法更新 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
    });
}