敲除下拉表单绑定

Question

我有一个用于添加多个地址的html表单：

http://i48.tinypic.com/jg2ruo.png

这样，如果我更改了Address Type选择，整个表单必须绑定到正确的json address对象：

var jsonAddresses = { Addresses:
            [
                { AddressType: 1, Address1: "", Address2: "",Province:"",City:"",State:"",PostalCode:"",Municipal:"" },
                { AddressType: 2, Address1: "", Address2: "",Province:"",City:"",State:"",PostalCode:"",Municipal:"" },
                { AddressType: 3, Address1: "", Address2: "",Province:"",City:"",State:"",PostalCode:"",Municipal:"" },
                { AddressType: 4, Address1: "", Address2: "",Province:"",City:"",State:"",PostalCode:"",Municipal:"" }
            ] 
         };

实际上，我已经用Jquery用很多代码做到了这一点，但我想知道如何用Knockout来做到这一点。这样做的想法是，我希望只有一个json对象，而不是具有4种类型的地址的固定json对象，如果我选择一个不在数组中的地址类型，则添加并绑定该对象，如果该地址类型已经存在于数组中，则直接绑定它。然后，我可以有一个"remove“链接，当单击该链接时，所选的地址类型对象将从数组中删除。

提前谢谢。

Answer 1

我猜测这一点，因为它还不完全清楚。您需要一个用于编辑地址的表单，其中包含一个可让您选择要编辑的地址的下拉列表。我已经组装了一个working fiddle，但这里是重要的部分。

您有一个Address对象的概念，由于您将更新值，因此可以观察到该对象。然后，您需要一个视图模型来跟踪所有地址，对selected地址有一些概念，并能够添加新地址。这是不清楚的部分，所以我只用了一个New Address按钮。如果你有其他想法，请告诉我。除了状态列表和初始地址数据(两者都应该来自服务器)之外，这就是所有的代码，正如您所看到的，knockout使它变得非常简单。

HTML：

<select data-bind="options: addresses, optionsText: 'typeName', value: selectedAddress"></select>
<div data-bind="with: selectedAddress">
    Name: <input data-bind="value: typeName" /></br>
    Line1: <input data-bind="value: address1" /></br>
    Line2: <input data-bind="value: address2" /></br>
    City: <input data-bind="value: city" /></br>
    State: <select data-bind="options: $parent.states, value: state"></select></br>
    Postal Code: <input data-bind="value: postalCode" />
</div>
<button data-bind="click: addAddress">New Address</button>
<button data-bind="click: deleteAddress">Remove Address</button>

​

ViewModels：

var Address = function(address) {
    this.id = ko.observable(address.AddressType || 0);
    this.typeName = ko.observable(address.TypeName || '');
    this.address1 = ko.observable(address.Address1 || '');
    this.address2 = ko.observable(address.Address2 || '');
    this.city = ko.observable(address.City || '');
    this.state = ko.observable(address.State || '');
    this.postalCode = ko.observable(address.PostalCode || '');
};

var App = function(addressList) {
    var self = this;
    self.states = states;
    self.addresses = ko.observableArray(ko.utils.arrayMap(addressList,
          function(i) { return new Address(i); }
    ));
    self.selectedAddress = ko.observable(self.addresses[0]);

    self.addAddress = function() {
        var newId = self.addresses()[self.addresses().length -1].id + 1;
        var newAddress = new Address({AddressType: newId});
        self.addresses.push(newAddress);
        self.selectedAddress(newAddress);
    };

    self.deleteAddress = function() {
        self.addresses.remove(self.selectedAddress());
        self.selectedAddress(self.addresses[0]);
    };
};

EDIT1：新增remove按钮。这是为了演示，显然，当数组为空时，您需要一些安全逻辑。