所以我有 2 个 View 模型,一个包含我使用的数组,该数组将 dataList 中的每个数据节点绑定(bind)到表单,另一个用作每个数据节点的模型。我正在尝试使用第二个 View 模型中的数据更新第一个 View 模型中的数组:
HTML:
<div data-bind="foreach:mainArray">
<select data-bind="options: $root.ourTypes, optionsValue: 'ID', optionsText: 'Name', value: $data.OurTypeId"></select>
</div>
JavaScript:
var dataList = [
{ OurTypeId: 4 }, // there are other values here...
{ OurTypeId: 2 }, // and here...
{ OurTypeId: 3 } // and here...
];
var ourTypes = [
{ ID:"1", Name:"None", Limit:0 },
{ ID:"2", Name:"Fruits", Limit:5 },
{ ID:"3", Name:"Vegetables", Limit:5 },
{ ID:"4", Name:"Meats", Limit:2 }
];
var myViewModel = new MyViewModel(dataList);
ko.applyBindings(myViewModel);
function MyViewModel(dataList) {
var self = this;
self.ourTypes = ourTypes;
self.mainArray = ko.observableArray([]);
if (dataList.length > 0) {
for (var i=0; i<dataList.length; i++) {
var myDataViewModel = new MyDataViewModel(dataList[i]);
//alert(myDataViewModel.OurType);
self.mainArray.push(myDataViewModel);
}
}
}
function MyDataViewModel(vm) {
var self = this;
if (vm != null) {
var myType = "";
for (var i=0; i<ourTypes.length; i++) {
if (ourTypes[i].ID == vm.OurTypeId)
myType = ourTypes[i].Name;
}
self.OurTypeId = ko.observable(vm.OurTypeId);
self.OurType = myType;
} else {
self.OurTypeId = 0;
self.OurType = "";
}
self.OurTypeId.subscribe(function(newValue) {
var updatedItem = 0;
var newName = "";
for (var i=0; i<ourTypes.length; i++) {
if (ourTypes[i].ID == newValue) {
self.OurType = ourTypes[i].Name;
// alert(ourTypes[i].Name);
updatedItem = i;
}
}
// I want to do something like this to update "OurType" in mainArray...
// var theList = MyViewModel.mainArray();
// theList[updatedItem].OurType = self.OurType;
// MyViewModel.mainArray(theList);
});
}
这实际上是代码的精简版本,仅关注“ourTypes”,我的 fiddle 还有更多内容。我使用下拉列表中的 ID 来指示模型中的更改,但随后我必须手动更新类型的实际名称(您将看到当 ID 在我的 fiddle 中更新时名称不会更新),所以我尝试在 .subscribe() 函数中执行此操作,但似乎没有任何效果。有什么想法吗?
最佳答案
自OurType
的名字起当您更改 ID 时,应该会自动更改,这对于 computed observable 来说是一项很好的工作。 :
self.OurType = ko.computed(function() {
return ko.utils.arrayFirst(ourTypes, function(type) {
return type.ID == self.OurTypeId();
}).Name;
});
当计算的可观察量运行时,它会记录访问的所有其他可观察量 - 在我们的例子中,这只是 self.OurTypeId()
。这就是所谓的依赖。每当依赖项发生变化时,计算就会自动再次运行。
在这里,我们使用 Knockout 辅助函数 ko.utils.arrayFirst
迭代ourTypes
并返回其中 ID 与 self.OurTypeId()
匹配的第一个元素用户已选择。然后我们返回.Name
其中ourType
元素。
请注意您的if (vm != null)
else
子句可能会带来麻烦:您在那里设置的值是不可观察的。
self.OurTypeId = 0;
这意味着MyDataViewModel
哪里 vm
是 null
将被打破 - knockout 将绑定(bind) <select>
到一个简单的、不可观察的“0”,并且永远不会再次更新。
另外,有一次你正在制作 self.SlotPosition
一个可观察的,另一次你将它设为一个可观察的数组。
最好将属性初始化为可观察一次并仅更新其值:
function MyDataViewModel(vm) {
var self = this;
this.SlotPosition = ko.observable();
this.OurTypeId = ko.observable();
if (vm) {
this.SlotPosition(vm.SlotPosition);
this.OurTypeId(vm.OurTypeId);
}
this.OurType = ko.computed(function() {
if (!self.OurTypeId()) {
return;
}
return ko.utils.arrayFirst(ourTypes, function(type) {
return type.ID == self.OurTypeId();
}).Name;
});
}
关于javascript - Knockout.js - 更新父 View 模型中的数组,并使用第二 View 模型中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28514159/