javascript 不能对同一个元素多次应用绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20935219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
You cannot apply bindings multiple times to the same element
提问by Alvin
I have a Bootstrap modal, and every time it shows up I will use KO to bind a <select> dropdown.
我有一个 Bootstrap 模式，每次它出现时我都会使用 KO 来绑定一个<select> 下拉菜单。
HTML:
HTML：
<select id="album" name="album" class="form-control" data-bind="options: availableAlbums">
</select>
JavaScript:
JavaScript：
$('#uploadModal').on('show.bs.modal', (function () {
function AlbumsListViewModel() {
var self = this;
self.availableAlbums = ko.observableArray([]);
$.ajax({
url: "../../api/eventapi/getalbums",
type: "get",
contentType: "application/json",
async: false,
success: function (data) {
var array = [];
$.each(data, function (index, value) {
array.push(value.Title);
});
self.availableAlbums(array);
}
});
}
ko.applyBindings(new AlbumsListViewModel());
}));
However, on the second showing, KO will present me with this error:
但是，在第二次放映时，KO 会向我显示此错误：
Error: You cannot apply bindings multiple times to the same element.
错误：您不能对同一个元素多次应用绑定。
回答by Jeroen
The error message says most of it. You have two options:
错误消息说明了大部分内容。您有两个选择：
- Call the
applyBindingsfunction once, when your page loads. KO will automatically update the View when you update the model in a AJAX success function. - Call the
applyBIndingsfunction on each AJAX success, but supply additional parameters to tell it what element to bind to.
applyBindings当您的页面加载时调用一次该函数。当您在 AJAX 成功函数中更新模型时，KO 将自动更新视图。applyBIndings在每次 AJAX 成功时调用该函数，但提供额外的参数来告诉它绑定到哪个元素。
Most likely the first option is what you're looking for. Remove the call from the $('#uploadModal').oncall and place it on document load (if you haven't already).
很可能第一个选项就是您正在寻找的。从呼叫中删除呼叫$('#uploadModal').on并将其置于文档加载中（如果您还没有）。
To see what I mean, here's two fiddles:
要明白我的意思，这里有两个小提琴：
- Your current codewith the error you mention.
- Refactored versionthat doesn't have the error.
The latter tries to stay as close as possible to your initial version (so as to focus on the problem at hand), and goes along these lines:
后者试图尽可能接近您的初始版本（以便专注于手头的问题），并遵循以下路线：
function AlbumsListViewModel() {
var self = this;
self.availableAlbums = ko.observableArray([]);
}
var mainViewModel = new AlbumsListViewModel();
ko.applyBindings(mainViewModel);
$('#uploadModal').on('show.bs.modal', (function () {
// Commenting things out to mock the ajax request (synchronously)
var data = [{Title:'test'}];
/*$.ajax({
url: "../../api/eventapi/getalbums",
type: "get",
contentType: "application/json",
async: false,
success: function (data) {*/
mainViewModel.availableAlbums.removeAll();
var array = [];
$.each(data, function (index, value) {
array.push(value.Title);
});
mainViewModel.availableAlbums(array);
/*}
});*/
}));
