淘汰賽下拉形式結合

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：加入移除按鈕。這是用於演示的，當數組爲空時，顯然你會需要一些安全邏輯。