javascript - 按钮点击保存在 KO

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

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

这是显示该方法的更新 fiddle :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);

数组现在包含具有实际值和副本的对象。我们将输入绑定(bind)到副本而不是实际数据。

<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 .