我有一个像这样的ko maaaped数组。
var Type = [];
Type.push("Flip");
Type.push("Bar");
Type.push("Foo");
// converting the json to ko mapped collection
viewModel = {
firstValue: ko.observable("hello"),
Type: ko.mapping.fromJS(Type),
save: function () {
alert(viewModel.Type[0]);
alert("have to save the values here");
},
};
我使用foreach创建了一个输入来编辑该数组。
<div data-bind="foreach: Type">
<p><input data-bind='value: $parent.Type()[$index()]' /></p>
<button data-bind='click: save'> Save </button>
我想在按钮点击中将编辑后的值保存回数组,而不是立即保存。如何实现这个目标?
答案 0 :(得分:2)
您需要将输入绑定到临时副本而不是实际数据,然后在保存时将临时数据复制到实际值。
这里有更新的小提示,显示了这种方法:http://jsfiddle.net/mS6LF/8/
var Type = [];
Type.push({ value: "Flip", temp: "Flip"});
Type.push({ value: "Bar", temp: "Bar"});
Type.push({ value: "Foo", temp: "Foo"});
// converting the json to ko mapped collection
viewModel = {
firstValue: ko.observable("hello"),
Type: ko.mapping.fromJS(Type),
save: function () {
// Loop through array and set all temp values to the actual value.
ko.utils.arrayForEach(this.Type(), function(element){
element.value(element.temp());
});
},
};
ko.applyBindings(viewModel);
现在,数组包含具有实际值和副本的对象。我们将输入绑定到副本而不是实际数据。
<div data-bind="foreach: Type">
<p>
<input data-bind='value: temp' />
Actual = <span data-bind='text: value'></span>
</p>
</div>
<button data-bind='click: save'>Save</button>
答案 1 :(得分:0)
我根据前一个答案中提供的geoff-appleford更新了Ryan Niemeyer's protectedObservable
示例并进行了修改
您无需使用original-value
和temp-value
添加或复制数组中的每个值。您只需要确保您的可观察项目有点protectedObservable
请查看我的示例 DEMO 。