knockout.js - knockout 每个 observableArray 似乎不适用于对象数组

Question

我不确定为什么我的 foreach 部分不起作用？第一个数据绑定(bind)文本:虽然 Id 正在工作。

knockout :

import Knockout from 'knockout';

function ViewModel() {
    var self = this;
    self.Id = ko.observable();
    self.Sections = ko.observableArray();
};

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

$.getJSON("/api/projects/3455", function(data) {
    console.log(data);
    viewModel.Id(data.Id);
    viewModel.Sections(data.Sections);
});

HTML:

<div data-bind="text: Id">
    <div data-bind="foreach: Sections">
        <div data-bind="text: Id"></div>  
    </div>
</div>

返回的 JSON:

Answer 1

问题出在带有第一个 text 绑定(bind)的 html 中，因为它替换了顶级 div 元素的全部内容，并且您丢失了 foreach。

因此您需要将文本绑定(bind)移动到顶部 div 中:

<div>
    <div data-bind="text: Id"></div>
    <div data-bind="foreach: Sections">
        <div data-bind="text: Id"></div>  
    </div>
</div>

如果您不喜欢额外的 div，则可以使用无容器绑定(bind)语法:

<div>
    <!-- ko text: Id --><!-- /ko -->
    <div data-bind="foreach: Sections">
        <div data-bind="text: Id"></div>  
    </div>
</div>