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ボタンを付けただけです。他に何か考えていることがあれば教えてください。状態のリストと初期アドレスデータ（両方ともサーバーから取得する必要があります）を除いて、これはすべてのコードであり、ご覧のとおり、ノックアウトを使用すると非常に簡単になります。

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>

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：削除ボタンを追加しました。これはデモ用です。配列が空の場合は、明らかに安全ロジックが必要になります。

于 2012-07-05T18:50:06.673 に答える