Question

我有一个像这样的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>

我想在按钮点击中将编辑后的值保存回数组，而不是立即保存。如何实现这个目标？

http://jsfiddle.net/mS6LF/1/

Answer 1

您需要将输入绑定到临时副本而不是实际数据，然后在保存时将临时数据复制到实际值。

这里有更新的小提示，显示了这种方法：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>

对于更复杂的方法，see Ryan Niemeyer's protectedObservable blog post。

Answer 2

我根据前一个答案中提供的geoff-appleford更新了Ryan Niemeyer's protectedObservable示例并进行了修改

您无需使用original-value和temp-value添加或复制数组中的每个值。您只需要确保您的可观察项目有点protectedObservable
请查看我的示例 DEMO 。

按钮单击“在KO中保存”

2 个答案: