Javascript 每个嵌套问题的淘汰
我试图使用两个viewmodel的属性生成一个表,这两个viewmodel是主viewmodel的子viewmodel,ko.applyBindings被称为using 其思想是为SubVM1中的每个元素生成一行,其中第一个单元格是元素的名称。然后,对于SubVM2中的每个元素,将向行中添加一个额外的单元格 行正确生成,第一个单元格显示SubVM1名称,但后面只跟一个单元格,而不是SubVM2中的元素数量 此外,数据绑定中的函数也不起作用。我曾尝试将Value函数声明为SubV2的原型,但它错误为未定义 无论如何,我不确定的是,绑定上下文显然正在发生一些事情,我们将非常感谢您的帮助Javascript 每个嵌套问题的淘汰,javascript,knockout.js,Javascript,Knockout.js,我试图使用两个viewmodel的属性生成一个表,这两个viewmodel是主viewmodel的子viewmodel,ko.applyBindings被称为using 其思想是为SubVM1中的每个元素生成一行,其中第一个单元格是元素的名称。然后,对于SubVM2中的每个元素,将向行中添加一个额外的单元格 行正确生成,第一个单元格显示SubVM1名称,但后面只跟一个单元格,而不是SubVM2中的元素数量 此外,数据绑定中的函数也不起作用。我曾尝试将Value函数声明为SubV2的原型,但它错误
<tbody data-bind="foreach: {data: SubViewModel1, as: 'SubVM1'}">
<tr>
<td data-bind="text: SubVM1.Name" />
<!-- ko foreach: {data: $root.SubViewModel2, as: 'SubVM2'} -->
<td data-bind="text: Value(SubVM1.Type)"></td>
<!-- /ko -->
</tr>
</tbody>
编辑:部分完成jsfiddle:我可以看到一些东西。 第一个是这个。 敲除通常不喜欢自关闭标记。在这种情况下,始终使用结束标记 第二点是,您希望在屏幕上更新的任何内容都应该是ko.observable或ko.observableARay。ko.applyBindings之后对属性的任何更改都不会反映在屏幕上 HTML
Include jsfiddle please有一个jsfiddle表示问题:未捕获错误:无法解析绑定。消息:ReferenceError:未定义SubVM1;Bindings value:text:SubVM1.Name在本例中,Name起作用并开始呈现,但它无法访问SubVM2。在虚拟foreach的数据绑定中键入函数。谢谢。我不知道自动关闭标签的问题。在应用绑定后,我在这个特定示例中拥有的所有内容都不需要更新,只需在标头中为每个SubVM2添加一个radiobutton即可。
<table border="1">
<tbody data-bind="foreach: {data: subViewModel1, as: 'SubVM1'}">
<tr>
<td data-bind="text: name"></td>
<!-- ko foreach: {data: $root.subViewModel2, as: 'SubVM2'} -->
<td data-bind="text: SubVM2.Value(SubVM1.Type)"></td>
<!-- /ko -->
</tr>
</tbody>
</table>
function MasterViewModel() {
var self = this;
self.subViewModel1 = ko.observableArray([]);
self.subViewModel2 = ko.observableArray([]);
}
function SubVM1ViewModel() {
var self = this;
self.name = ko.observable("Sub View Model 1");
self.otherProperty = ko.observable(43);
}
function SubVM2ViewModel() {
var self = this;
self.title = ko.observable('Sub View Model 2');
self.subVM1List = ko.observableArray([]);
}
SubVM2ViewModel.prototype.Value = function (type) {
for (var i = 0; i < this.subVM1List().length; i++) {
if (this.subVM1List()[i].Type === type) {
return this.subVM1List()[i].name();
}
}
};
var masterVM = new MasterViewModel();
var subVM2 = new SubVM2ViewModel();
subVM2.subVM1List.push(new SubVM1ViewModel());
masterVM.subViewModel1.push(new SubVM1ViewModel());
masterVM.subViewModel2.push(subVM2);
ko.applyBindings(masterVM);
function MasterViewModel() {
var self = this;
self.subViewModel1 = [];
self.subViewModel2 = [];
}
function SubVM1ViewModel() {
var self = this;
self.name = "Sub View Model 1";
self.otherProperty =43;
}
function SubVM2ViewModel() {
var self = this;
self.title = 'Sub View Model 2';
self.subVM1List = [];
}
SubVM2ViewModel.prototype.Value = function (type) {
for (var i = 0; i < this.subVM1List.length; i++) {
if (this.subVM1List[i].Type === type) {
return this.subVM1List[i].name;
}
}
};
var masterVM = new MasterViewModel();
var subVM2 = new SubVM2ViewModel();
subVM2.subVM1List.push(new SubVM1ViewModel());
masterVM.subViewModel1.push(new SubVM1ViewModel());
masterVM.subViewModel2.push(subVM2);
ko.applyBindings(masterVM);