knockout.js - 観察可能な配列のアイテムを編集および作成するために同じフォームをノックアウトします

Question

初心者からコまで、私はこれに苦労しています。新しいアドレスを追加するためのフォームがあります (単純化するために、プロパティを 1 つだけ使用します)。これは、配列を更新します (そして、リストに表示します)。私が達成したいのは、配列とそれをフォームに表示できるようにします. これは機能しますが、そこにある変更はリストに表示されるものを更新していません.

ビュー内のコード:

<div data-bind="with: newAddress" class="span6">
    <input data-bind="value: Line1()" placeholder="Address line 1" />
    <div>
        <button data-bind="click: $parent.addAddress">Add</button>
    </div>
</div>

<div class="span4">
    <div data-bind="visible: addresses().length > 0">
        <div data-bind="foreach: addresses">
            <address>
                <span data-bind="click: $parent.removeAddress">Remove</span>
                <span data-bind="click: $parent.editAddress">Edit</span>
                <div data-bind="text: Line1"></div>                 
            </address>
        </div>
    </div>
</div>

スクリプト内の関連コード

function ViewModel() {
    var self = this;

    self.addresses = ko.observableArray(ko.utils.arrayMap(addresses, function(address) {
        return new Address(address);
    }));

    self.newAddress = {
        Line1: ko.observable(""),
    };

    self.addAddress = function() {
        self.addresses.push(new Address(this);
        self.newAddress.Line1("");
    };

    self.addAddress = function() {
        self.addresses.push(new Address(this);
        self.newAddress.Line1("");
    };

    self.editAddress = function() {
        self.newAddress.Line1(this.Line1);
    };

    self.remove = function() {
        self.parties.remove(this);
    };

};

// As it is used for both the addresses coming from the server and the added in
// the form I do this check
function Address(address) {
    this.Line1 = ko.isObservable(address.Line1) ? address.Line1() : address.Line1;
}

アドレスの 1 つがリストに表示されたデータに選択されたときに、フォームの変更をバインドするにはどうすればよいですか?

ありがとう