1

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

4

2 回答 2

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>

有关更复杂的方法，请参阅 Ryan Niemeyer 的protectedObservable博客文章。

于 2013-06-19T08:41:37.200 回答
0

我根据上一个答案中提供的Ryan Niemeyer 的修改更新了geoff-appleford示例protectedObservable

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

于 2013-06-19T10:14:01.153 回答