使用Knockout.js和ko.mapping的一维数组模板

Question

我有一个JSON字符串，我映射与ko。我需要为其中一个映射数组创建可观察对象绑定。数组在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]直接绑定到输入值，但随后它不会更新为数组。

下面是viewModel: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/

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