Knockout.js 在循环另一个ObserverArray时更新一个ObserverArray
给定一个由服务调用填充的ObservalArray,用于在视图中呈现复选框列表:Knockout.js 在循环另一个ObserverArray时更新一个ObserverArray,knockout.js,Knockout.js,给定一个由服务调用填充的ObservalArray,用于在视图中呈现复选框列表: orgChart = ko.observableArray(); 身份证 系 以及另一个ObservalArray,由另一个服务填充,该服务返回从上述数组中选择(在DB中)的那些部门的Id列表 selectedDepartment = ko.observableArray(); 身份证 在第一个数组上循环时,如何使knockout绑定到第二个数组 我尝试了这个方法,它会呈现复选框列表,但无法更新sele
orgChart = ko.observableArray();
- 身份证
- 系
selectedDepartment = ko.observableArray();
- 身份证
<div data-bind="foreach: orgChart">
<div><input type="checkbox" data-bind="checked: selectedDepartment, value: Id }"/><span data-bind="text: Dept"/></div>
</div>
我猜我需要使用映射或计算值,但我找不到任何示例。我的解决方案是只使用一个可观察的array,而不是两个 将从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 );
瞧
或者,如果您想将带宽和/或删除/插入语句保存到数据库,您可以将选定的设置为可观察的,订阅其更改,然后将其单独保存到服务器
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
});
}
谢谢,我对这个策略唯一关心的是,我需要selectedDepartments变量是可观察的,这样它就可以保存回数据库。我想你可能会问这个问题。查看我的编辑。希望它能帮上忙汉克斯,我要试试看!如果能用,我会检查一下。
var departments = vm.departments(),
selected = [];
for( var i = 0; i < departments.length; i++ ) {
var dept = departments[i];
if( dept.selected ) selected.push(dept);
}
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
});
}