javascript - knockout foreach嵌套问题

Question

我正在尝试使用两个 View 模型的属性生成一个表，这两个 View 模型是主视图模型的 subview 模型，使用 ko.applyBindings() 进行调用。

这个想法是为 SubVM1 中的每个元素生成一行，其中第一个单元格是元素的名称。然后，对于 SubVM2 中的每个元素，都会向该行添加一个附加单元。

行生成正确，第一个单元格显示 SubVM1 名称，但后面仅跟一个单元格，而不是 SubVM2 中的许多元素。

此外，数据绑定(bind)中的函数也不起作用。我尝试将 Value 函数声明为 SubV2 的原型(prototype)，但它错误地显示为未定义。

无论如何，我不确定绑定(bind)上下文中是否明显发生了一些事情，我们将不胜感激。

<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:http://jsfiddle.net/jgr71o8t/1

Answer 1

我可以看到一些事情。 第一个是 <td data-bind='' /> .
knockout 通常不喜欢自闭合标签。始终使用结束标签，在本例中为 <td data-bind=''></td>

第二个是你想要在屏幕上更新的任何内容都应该是 ko.observable 或 ko.observableArray。 ko.applyBindings 之后对属性的任何更改都不会反射(reflect)在屏幕上

HTML

<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>

JS Fiddle Demo with knockout bindings on all properties

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);

JS Fiddle Demo with straight javascript properties

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);