Question

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

orgChart = ko.observableArray();

编号
系

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

selectedDepartment = ko.observableArray();

编号

当循环遍历第一个数组时，如何将knockout绑定到第二个数组？

我试过这个，它会呈现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>

修改

要将数据发送回服务器，只需循环遍历departments数组并抓取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 }); }

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

1 个答案: