淘汰赛下拉形式结合

Question

我有添加多个地址的HTML表单：

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

这样，如果我改变地址类型选择整个表格，以绑定到正确的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来做到这一点。这个想法是不是有一个固定的JSON对象与4种类型的地址我想只有1个JSON对象，如果我选择一个不在数组中的地址类型，那么该对象被添加和绑定，如果地址类型已经存在于数组中然后将其绑定。那么我可以有一个“删除”链接，单击时从数组中删除选定的地址类型对象。

在此先感谢。

Answer 1

我猜在这一点，因为它并不完全清楚。您需要一个表单来编辑地址，并且可以通过下拉菜单选择您正在编辑的地址。我已将working fiddle放在一起，但这里是重要的部分。

你有一个Address对象，它是可观察的，因为你会被更新的值的概念。那么你需要一个视图模型来跟踪所有的地址，有一些selected的地址，以及添加新地址的能力。这是不清楚的部分，所以我只是按了New Address按钮。让我知道你是否有其他想法。除了状态列表和初始地址数据（两者都应该来自服务器）之外，这是所有代码，并且您可以看到淘汰赛使其非常简单。

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：加入移除按钮。这是用于演示的，当数组为空时，显然你会需要一些安全逻辑。