0

前几天我问过这个问题

敲除相同的表单以编辑和创建可观察数组的项目

现在我想稍微改变一下行为。

正如您在小提琴 lagerone 中看到的那样，当您将注意力从输入文本中移出时，目标会更新为http://jsfiddle.net/danne567/gTHpu/31/ 。我想推迟这个，直到你点击更新按钮。

我已经做了一些解决方法并且似乎可以工作，但我对此并不满意：

我没有制作地址可观察对象的内部属性，我已经向地址对象添加了一个顺序并按它对数组进行排序。然后，每当您编辑地址并单击更新时，我都会将其从可观察数组中删除并再次添加（使用更改的字段）并再次对数组进行排序。

self.updateAddress = function() {
    self.AddressEditingMode(false);
    self.addresses.remove(this);
    self.addresses.push(new Address(ko.utils.unwrapObservable(self.formAddress),self.EditingAddressOrder()));
    self.addresses(_.sortBy(self.addresses(), function(address) { return address.Order; }));
    self.emptyAddressForm();
};

我知道很难将我的解释放在上下文中，所以请随时向我指出您需要的任何内容。

谢谢，

马可

附言。_.sortBy 用于下划线功能。

4

2 回答 2

1

我试图更正您的代码，在 jsfiddle 上浏览它：http: //jsfiddle.net/gTHpu/32/

首先，我更改了 Address 构造函数（添加 id 参数）

var id = 1;
function Address(address) {
    this.id = id++;
    this.Line1 = ko.observable(ko.utils.unwrapObservable(address.Line1));
}

然后，我简化了新地址变量：

self.addresses = ko.observableArray(ko.utils.arrayMap(addresses, function(address) {
    return address.id ? address : new Address(address);
}));
self.newAddress = ko.observable('');
self.addAddress = function() {
    self.addresses.push(new Address({Line1: this.newAddress()}));
    self.newAddress('');
};

然后，添加删除功能

self.removeAddress = function (address) {
    self.addresses.remove(address);
}

我更改更新地址过程：

self.addressToEdit = null;
self.editAddress = function(addressItem) {
    self.addressToEdit = addressItem;
    self.newAddress(addressItem.Line1());
};

self.updateAddress = function () {
    if (self.addressToEdit) {
        self.addressToEdit.Line1(self.newAddress());
        self.addressToEdit = null;
    }
    self.newAddress('');
};

该解决方案对您有用吗？

PS。对不起我的英语，请随时纠正我，因为我是非母语人士:)

于 2013-07-06T23:24:17.537 回答
1

大多数情况下，但您想要做的是使用您的地址的新副本，然后仅在更新时应用更改。我修改了您的地址视图模型，使其在更新方面更易于使用：

地址视图模型：

function Address(address) {
    var self = this;
    self.Line1 = ko.observable();

    // we'll use this method to update existing addresses that have been modified
    self.initialize = function (data) {
        self.Line1(ko.utils.unwrapObservable(data.Line1));
    }

    self.initialize(address);
}

主虚拟机的主要变化：

    // this will store the currently selected address from the observableArray
    var selectedAddress;
    // added this just as example, use it to toggle which buttons to show (see fiddle)
    self.isEditing = ko.observable(false);

    // helper function to clear out the input if the user doesnt want to 
    //  update the address or is finished with it
    function clearSelected() {
        self.isEditing(false);
        self.newAddress(new Address(""));
    }

    self.editAddress = function (addressItem) {
        // set the address item that was picked to selectedAddress variable
        selectedAddress = addressItem;
        // set what mode we're in
        self.isEditing(true);
        // create new copy of address to work off of based on the clicked address item
        self.newAddress(new Address(addressItem));
    };

    // once update is clicked, the copy of the context is passed to this function
    self.updateAddress = function (address) {
        // call the new initialize function on the address 
        //  view model that we've saved as a reference in the 
        //  original list with whatever values have changed
        selectedAddress.initialize(address);
        // clear the selected item and reset the mode so we can add new items
        clearSelected();
    };

小提琴：http: //jsfiddle.net/58mU5/

于 2013-07-07T00:28:44.927 回答