0

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

orgChart = ko.observableArray();
  • ID
  • 部门

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

selectedDepartment = ko.observableArray();
  • ID

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

我试过这个，它呈现 Checkbox 列表，但无法更新 selectedDepartment 数组。

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

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

4

1 回答 1

0

我的解决方案是只有一个 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一个 observable，订阅它的更改，然后将其单独保存到服务器。

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
    });
}
于 2013-05-02T16:17:50.790 回答