具有Knockout.js和ko.mapping的单维数组的模板 [英] Template for a single dimension array with Knockout.js and ko.mapping
问题描述
我有一个用ko.mapping插件映射的JSON字符串，我需要为其中一个映射数组创建可观察的绑定.数组在JSON中为[1,2,3,4,5]，因此没有索引.
I have a JSON string that I am mapping with ko.mapping plugin and I need to create observable bindings for one of the mapped arrays. The array is in the JSON as [1,2,3,4,5] so it has no index.
我有以下代码可以工作到一定程度:
I have the following code working to a certain point:
<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}但是显示正确的值.
So everything is working as expected except <input data-bind="value: this.data" /> That field remains blank ... ${this.data} Shows the correct value however.
总体而言，我想更新JSON字符串并将其重新保存在平面文件中.我可以将数据数组:[1,2,3,4]直接绑定到输入值，但是它不会作为数组更新.
Overall, I am tying to update a JSON string and re-save it in a flat file. I can bind the data array: [1,2,3,4] directly to the input value but then it does not update as an array.
这是viewModel: var viewModel = {};
Here is the 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]
}
]
[
{
"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字符串，然后将其保存.
Any help would be greatly appreciated. Also open to suggestions if I am approaching this from the wrong angle. Ultimately just want to be able to modify the JSON sting through a UI and then save it.
谢谢.
推荐答案
要正确地编辑数组中的值，您将需要将原始数组映射到包含要绑定到[1,2,3]的实际属性的结构，从而成为[{val: 1}, {val: 2}, {val: 3}].与$data绑定将不起作用，因为KO无法根据用户输入确定如何更新它(当前无法理解它是否位于数组中的某个索引处).
To properly edit a value in the array, you will want to map the original array to a structure that contains an actual property to bind against [1,2,3] becomes [{val: 1}, {val: 2}, {val: 3}]. Binding against $data will not work, as KO is not able to determine how to update it from user input (currently not able to understand that it is located at some index in an array).
我喜欢做类似的事情: http://jsfiddle.net/rniemeyer/vv2Wx/
I like to do something like: http://jsfiddle.net/rniemeyer/vv2Wx/
这使用了此技术使数组变成JSON时自动使它看起来像原始数组.
This uses this technique to make the array look like the original automatically when it is turned into JSON.
这篇关于具有Knockout.js和ko.mapping的单维数组的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
