Json 敲除下拉表单绑定

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

这样，如果更改地址类型选择，整个表单必须绑定到正确的json地址对象：

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完成这项工作。其思想是，不要使用一个带有4种地址类型的固定json对象，我只希望有一个json对象，如果我选择了一个不在数组中的地址类型，则添加并绑定该对象，如果该地址类型已经存在于数组中，则只需绑定它即可。然后我可以有一个“删除”链接，当单击该链接时，选定的地址类型对象将从数组中删除

---

提前谢谢。

我对此有点猜测，因为还不完全清楚。您需要一个用于编辑地址的表单，该表单带有一个下拉列表，可以让您选择要编辑的地址。我已经准备好了一份报告，但这里是重要的部分

您有一个

地址

对象的概念，它是可观察的，因为您将更新值。然后您需要一个viewmodel来跟踪所有地址，对所选的

地址有一些概念，并能够添加新地址。这是不清楚的部分，所以我只使用了一个新地址按钮。如果你还有别的想法，请告诉我。除了状态列表和初始地址数据（两者都应该来自服务器）之外，这就是所有代码，正如您所看到的，knockout使其非常简单

HTML:

EDIT1：添加了删除按钮。这是用于演示的，显然当阵列为空时，您需要一些安全逻辑。
Wooow！！！！非常感谢你的支持，我会尽力把我的项目和一切联系起来，并发布任何消息。谢谢，现在被标记为已接受。。。顺便问一下，在淘汰中，地址类型选择更改事件在哪里触发？谢谢我不确定我是否理解你的问题。你是在问地址类型是如何变化的吗？它是第一个select元素上的值绑定。是的，确切地说是绑定值：第一个select中的selectedAddress，但是当您设置viewModel应用程序时，我只能看到：self.selectedAddress=ko.observable（self.addresses[0]）；很抱歉我想我已经明白了：）@VAAA是的，那就是让
selectedAddress
成为一个可观察的对象，因为我们对它进行了绑定，并将它的初始值作为数组中的第一个地址开始。稍后，当
select
更改时，其值绑定将更新
selectedAddress
。
<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>

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]);
    };
};