每次单击 [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"));
出来,但没有帮助。
我怎样才能解决这个问题?
提前非常感谢。