带有 Knockout.js 和 ko.mapping 的单维数组模板

Question

我有一个使用 ko.mapping 插件映射的 JSON 字符串，我需要为其中一个映射数组创建可观察绑定。该数组在 JSON 中为 [1,2,3,4,5]，因此它没有索引。

我有以下代码工作到一定程度：

<script id="statRowTemplate" type="text/html">
    {{if type() != "column"}}
    <tr>
            <td><label>Name: </label><input data-bind="value: name" /></td>
            <td><label>Plot Points: </label><ul data-bind="template: {name: 'dataTemplate' , foreach: data}"></ul> </td>
    </tr>
    {{/if}}
</script>
<script type="text/html" id="dataTemplate">         
<li>
    <p>${this.data}</p>
        <input data-bind="value: this.data" />
</li>
</script>
<button data-bind="click: saveChanges">Save Changes</button>

所以除了<input data-bind="value: this.data" /> 之外，一切都按预期工作。该字段保持空白...${this.data} 但是显示正确的值。

总的来说，我想更新一个 JSON 字符串并将其重新保存在一个平面文件中。我可以将数据数组：[1,2,3,4] 直接绑定到输入值，但它不会作为数组更新。

这是视图模型： var viewModel = {};

$.getJSON('/data-forecast-accuracy.json', function(result) {

    viewModel.stats = ko.mapping.fromJS(result);
    console.log(result)
    viewModel.saveChanges = function() {

        var unmapped = ko.mapping.toJSON(viewModel.stats);
        console.log(unmapped);

        $.post('save-changes.php', {data: unmapped})
        .success(function() { console.log("second success"); })
        .error(function() {  console.log("error"); })
        .complete(function() {  console.log("complete"); });
    }

    ko.applyBindings(viewModel);
});

这是 JSON：

[ { "type":"spline", "marker":{ "symbol":"diamond" }, "name":"Cumulative", "data":[10,17,18,18,16,17,18,19] }, { "type":"spline", "marker":{ "symbol":"circle" }, "name":"Monthly", "data":[10,22,20,19,8,20,25,23] } ]

任何帮助将不胜感激。如果我从错误的角度处理这个问题，也可以接受建议。最终只是希望能够通过 UI 修改 JSON 字符串，然后将其保存。

提前致谢。

Answer 1

要正确编辑数组中的值，您需要将原始数组映射到包含要绑定的实际属性的结构[1,2,3] 变为[{val: 1}, {val: 2}, {val: 3}]。绑定$data 将不起作用，因为 KO 无法确定如何从用户输入更新它（目前无法理解它位于数组中的某个索引处）。

我喜欢这样做：http://jsfiddle.net/rniemeyer/vv2Wx/

这使用this 技术使数组在转换为 JSON 时自动看起来像原始数组。