javascript - 如何使用模板中的 Knockout 映射插件映射到来自服务器对象的数组？

Question

我在理解 ko.mapping.fromJS 和 ko.mapping.toJS 的工作原理时遇到一些困难。这里简化了我的问题的解释:我有一个来自服务器的 Risk 数组对象，该 Risk 数组有一个 Places 数组。

出于某种奇怪的原因，在调用 ko.mapping.FromJS 后，我的子 Places 数组被清除或隐藏，因此我的模板无法访问其内容...我发现通过使用 ko.mapping.ToJS 我可以得到访问地点内容，但通过这样做，添加项目后似乎没有刷新我的模板!

我正在尝试构建一个非常简单的网格，我可以在其中将位置添加到数组中的第一个风险以达到简化目的:

    var FromServer = {"Risk":[{"SourceKey":0,"Places":{"Place":[{"SourceKey":1}]}}]}

var viewModel = 
    {
        places : ko.mapping.fromJS(FromServer.Risk[0].Places.Place),
        addPlace : function()
        {
            alert('Entering add place, places count:' + this.places.length);
            this.places.push({SourceKey:"New SK"});
        }
    }
//If I leave this line it will update list but not refresh template
//If I comment it out it will show my Places array as empty!!!
viewModel = ko.mapping.toJS(viewModel)

ko.applyBindings(viewModel);

这是我的网格示例 HTML 代码:

 <p>You have asked for <span data-bind="text: places.length">&nbsp;</span> place(s)</p>
    <table data-bind="visible: places.length > 0">
        <thead>
            <tr>
                <th>SourceKey</th>
            </tr>
        </thead>
        <tbody data-bind='template: { name: "placeRowTemplate", foreach: places}'></tbody>
    </table>

<button data-bind="click: addPlace">Add Place</button>

<script type="text/html" id="placeRowTemplate">
    <tr>
        <td><input class="required" data-bind="value: $data.SourceKey, uniqueName: true"/></td>
    </tr>
</script>

这是我的 jsFiddle:jsFiddle Sample

我的问题是:为什么我必须用 ko.mapping.ToJS 解开我的 viewModel 以便我可以操作我的子数组？以及如何在这种情况下刷新我的模板？

请帮忙!

Answer 1

您的代码有一些问题。新的 JSFiddle 在这里:

http://jsfiddle.net/ueGAA/4/

1. 您需要为places数组创建一个可观察的数组，否则knockout将不知道它何时被更新。方法调用为

   ko.observableArray(arrayVar)

2. 您不想在 View 模型上调用 toJS。这会解开所有可观察量，并使 Knockout 无法更新您的绑定(bind)

3. 引用可观察数组时，需要使用括号:即。 viewModel.places().length。

4. 在您的 FromServer 对象中，您的 Place 对象包含一个数组，其中包含对象 {"SourceKey": 1} 。我假设您打算让 place 对象只有一个名为 SourceKey 的简单属性