javascript - 循环遍历可观察的 knockout 属性数组

Question

我正在使用 Knockout 映射库将来自 .NET 服务的 JSON 数据绑定(bind)到 KO View 模型中的属性，其中该属性具有一个我需要循环遍历并在屏幕上呈现的对象数组。

.NET 模型:

new{
    count = count,
    total = total,
    rows = items,
}

rows 属性保存对象列表，需要使用 KO 将其渲染到表中。

我厌倦了使用

<!-- ko foreach: masterData().rows-->
<tr>
    <td><span data-bind='text:  Id' /></td>
    <td><span data-bind='text:  Name' /></td>
    <td><span data-bind='text:  Description' /></td>
    <td><span data-bind='text:  Status' /></td>
</tr>
<!-- /ko -->

其中 masterData 是可观察的。数据加载后，它不会在表中呈现任何内容。作为解决方法，我已将 observable 模型更改为 observableArray([])

new List<dynamic> { 
    new
    {
        count = recCount,
        total = total,
        rows = items,
    }};

并将渲染逻辑更改为

<!-- ko foreach: masterData -->
<!-- ko foreach: rows-->
<tr>
    <td><span data-bind='text:  Id' /></td>
    <td><span data-bind='text:  Name' /></td>
    <td><span data-bind='text:  Description' /></td>
    <td><span data-bind='text:  Status' /></td>
</tr>
<!-- /ko -->
<!-- /ko -->

现在它按预期工作了。应该有更好的方法来处理这个问题，否则我会错过一些我认为的东西。另外，我需要循环访问此列表才能访问其他属性。

编辑1:

http://jsfiddle.net/krishnasarma/hdt9ehth/

Answer 1

好吧，我稍微调整了你的代码以使其理想。我认为没有必要循环 masterData 来获取 rows 数据。

我们现在可以使用 with 绑定(bind)，这非常适合上述情况。

查看:

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody data-bind="with:masterData2">
        <!-- ko foreach:rows -->
        <tr>
            <td><span data-bind='text:  Id' /></td>
            <td><span data-bind='text:  Name' /></td>
            <td><span data-bind='text:  Description' /></td>
            <td><span data-bind='text:  Status' /></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

View 模型:

var VM = {
    masterData: ko.observable([]), //initializing 
    masterData2: ko.observable([])
}

示例工作 fiddle here

如果您想以延迟加载方式检查 here