0

我有一个用于添加多个地址的 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 来做到这一点。这个想法不是拥有一个具有 4 种地址类型的固定 json 对象，我只想拥有 1 个 json 对象，如果我选择不在数组中的地址类型，则添加并绑定对象，如果地址类型已经存在于数组中然后绑定它。然后我可以有一个“删除”链接，单击该链接时，选定的地址类型对象将从数组中删除。

提前致谢。

4

1 回答 1

0

我对此进行了一些猜测，因为它并不完全清楚。您需要一个用于编辑地址的表单，并带有一个下拉菜单，可让您选择正在编辑的地址。我已经把一个工作小提琴放在一起，但这里是重要的部分。

您有一个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>

​</p>

视图模型：

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

于 2012-07-05T18:50:06.673 回答