Knockout.js-更新父视图模型中的数组,在第二个视图模型中使用值
Knockout.js - Updating an array in parent view model, with value in second view model
所以我有两个视图模型,一个包含我使用的数组,该数组将dataList
中的每个数据节点绑定到表单,另一个用作每个数据节点的模型。我正试图用来自第二个视图模型的数据更新第一个视图模型中的数组:
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);
});
}
这实际上是一个精简版的代码,只关注"我们的类型",我的fiddle有更多。我使用下拉列表中的ID来指示模型的更改,但随后我必须手动更新类型的实际名称(当ID在我的小提琴中时,你会看到名称不会更新),所以我尝试在.subscribe()
函数中这样做,但似乎什么都不起作用。有什么想法吗?
Fiddle:http://jsfiddle.net/navyjax2/ks6nbzp7/
由于OurType
的名称应该在更改ID时自动更改,因此这对于计算的可观察对象来说是一项很好的工作:
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()
匹配的第一个元素。然后,我们返回该ourType
元素的.Name
。
JSFiddle
请注意,您的if (vm != null)
else
子句可能存在问题:您在其中设置的值是不可观察的。
self.OurTypeId = 0;
这意味着vm
是null
的MyDataViewModel
将被破坏——Knockout将把<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;
});
}
- 角度指令没有更新模型视图
- “渲染骨干模型视图”返回未定义的结果
- 轮询更新主干模型/视图的请求
- 节点.js中的模型-视图-控制器模式
- 图像数据中的更改未反映在模型视图中
- 自定义 ngModel 指令以支持 jquery 插件中的模型>视图绑定
- 优化显示简单项目列表的模型/视图
- 建议:在JavaScript中难以使用模型视图控制器
- 将三维世界矢量转换为模型视图矩阵
- 在主干模型/视图上处理更复杂的验证逻辑(必填字段等)的最佳方式
- AngularJS在POST http请求上更新模型/视图
- web应用程序模型视图中的Java脚本
- 我的第一个骨干模型/视图.我的思路对吗?
- Knockoutjs的日期时间字段更新不会刷新模型视图
- Backbone.js中的嵌套集合/模型视图管理
- Javascript“this"模型视图演示器设计中的问题
- 模型视图控制器-javascript mvc框架设计实践,用于编辑就地界面
- 模型视图控制器-任何使用javascript mvc的人
- 模型视图控制器-我们是否在使用JavaScriptMVC(MVVM)框架,如Backbone.js、Angular等
- 模型视图控制器-AngularJS中是否可以在经典的javascript函数中使用数据绑定