1

每次单击 [add] 链接并将另一个文本框添加到以下 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"));
             }
         }
});

因此，基本上它工作正常，除了每次单击 [add] 链接时都会创建另一个 ViewModel 副本。这会导致文本框被复制。因此，当我有两个文本框并单击 [添加] 时，会添加两个文本框而不是一个。所以，我看到了 4 个文本框而不是 3 个。当我再次单击 [添加] 时 - 又出现了 4 个文本框。当我在任何新出现的文本框中输入一个值时，它会反映在与它一起出现的其他文本框中。基本上，每个 ViewModel 都会调用 addItems 函数，从而添加多个文本框。我试着评论

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

出来，但没有帮助。

我怎样才能解决这个问题？

提前非常感谢。

4

1 回答 1

1

您正在使用knockout但未使用它是功能。您不需要手动创建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 回答