1

[追加] リンクがクリックされ、別のテキスト ボックスが以下の HTML に追加されるたびに、ViewModel を更新しようとしています。

<a href="" data-bind="click: addItem">[add]</a>
 <div id="items">
     <input class="item" type="text" data-bind="value: searchRequest.Items[0].ItemName"/>
 </div>

私のViewModelは次のようになります：

$(function () {
    var ViewModel = function() {
         var self = this;
         this.searchRequest = {
             Items: [{
                        ItemName: ko.observable("")
                     }] 
         };
             this.addItems = function() { 
                 var htmlToInsert = '<input class="items" type="text" data-bind="value:  searchRequest.Items[' + self.searchRequest.Items.length.toString() + '].ItemName"/>';

                $(htmlToInsert).insertAfter('.item');

                self.searchRequest.Items.push({
                    ItemName: ko.observable(""),
                });

                ko.applyBindings(self, document.getElementById("items"));
             }
         }
});

したがって、[追加] リンクがクリックされるたびに作成される ViewModel の別のコピーを除いて、基本的には正常に動作します。これにより、テキストボックスが複製されます。そのため、テキスト ボックスが 2 つあるときに [追加] をクリックすると、テキスト ボックスが 1 つではなく 2 つ追加されます。そのため、3 つではなく 4 つのテキストボックスが表示されます。もう一度 [追加] をクリックすると、さらに 4 つのテキストボックスが表示されます。新しく表示されたテキストボックスのいずれかに値を入力すると、それとともに表示された他のテキストボックスに反映されます。基本的に、addItems 関数は各 ViewModel によって呼び出され、複数のテキスト ボックスが追加されます。コメントしてみた

ko.applyBindings(self, document.getElementById("items"));

アウトしましたが、役に立ちませんでした。

どうすればこれを修正できますか?

よろしくお願いします。

4

1 に答える 1

1

使用しているが使用しknockoutていないのは機能です。手動で create する必要はありませtextboxesんknockout。配列を作成し、アイテムをプッシュするだけですItems：observableArray

var ViewModel = function() {
    var self = this;
    self.searchRequest = {
        Items: ko.observableArray([{
            ItemName: ko.observable("")}])
    };

    self.addItem = function() {
        self.searchRequest.Items.push({
            ItemName: ko.observable(""),
        });
    };
}

ko.applyBindings(new ViewModel());

次に、バインディングItemsを使用してレンダリングします。foreach

<a href="#" data-bind="click: addItem">[add]</a>
<div data-bind="foreach: searchRequest.Items" id="items">
    <input class="item" type="text" data-bind="value: ItemName"/>
</div>

これが実際の例です：http://jsfiddle.net/vyshniakov/L8Mru/

于 2012-10-26T07:53:17.923 に答える