javascript 获取 KnockoutJs 错误您不能将绑定多次应用于同一元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22304730/
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
getting KnockoutJs error You cannot apply bindings multiple times to the same element
提问by iambdot
When the page loads I get the data by calling getGeneJSONData() and when I do a database udpate i call the same method to load the new data and I get the error "You cannot apply bindings multiple times to the same element"
当页面加载时，我通过调用 getGeneJSONData() 获取数据，当我执行数据库 udpate 时，我调用相同的方法来加载新数据，但出现错误“您不能多次将绑定应用到同一个元素”
Here's the code snips
这是代码片段
var geneViewModel = null;
var Gene = function (data) {
data = data || {};
var self = this;
self.geneValue = data.GeneValue;
self.geneCode = ko.protectedObservable(data.GeneCode);
self.geneName = ko.protectedObservable(data.GeneName);
self.geneComments = ko.protectedObservable(data.GeneComments);
};
var ViewModel = function (items) {
var self = this;
var newGene = { "geneValue": "", "geneCode": ko.protectedObservable(null), "geneName": ko.protectedObservable(null), "geneComments": ko.protectedObservable(null) };
self.genes = ko.observableArray(ko.utils.arrayMap(items, function (data) {
return new Gene(data);
}));
self.updateGene = function (gene) {
getGeneJSONData();
}
}
function getGeneJSONData() {
$.ajax({
type: "GET",
url: urlPath + '/GetGenes',
dataType: "json"
}).done(function (result) {
if (result) {
if (result.Success) {
var geneData = result.Data;
geneViewModel = new ViewModel(geneData);
ko.applyBindings(geneViewModel);
}
}
});
};
$(document).ready(function ($) {
getGeneJSONData();
});
I am not sure why I'm getting this error on the data reload. Do I have to remove the bindings before applying them again?
我不确定为什么在重新加载数据时出现此错误。在再次应用它们之前，我是否必须删除这些绑定？
采纳答案by Bradley Trager
You only need to apply bindings once. Instead of creating a new ViewModel for AJAX request, just use the same ViewModel and update its properties.
您只需要应用一次绑定。无需为 AJAX 请求创建新的 ViewModel，只需使用相同的 ViewModel 并更新其属性即可。
I would suggest that you do this by applying your bindings in your document ready function and passing your ViewModel to your update function. Here is how I would do it:
我建议你通过在你的文档就绪函数中应用你的绑定并将你的 ViewModel 传递给你的更新函数来做到这一点。这是我将如何做到的：
var ViewModel = function(items) {
var self = this;
var newGene = {
"geneValue": "",
"geneCode": ko.protectedObservable(null),
"geneName": ko.protectedObservable(null),
"geneComments": ko.protectedObservable(null)
};
self.genes = ko.observableArray(ko.utils.arrayMap(items, function(data) {
return new Gene(data);
}));
//pass in view model here
self.updateGene = function(gene) {
getGeneJSONData(self);
}
}
function getGeneJSONData(viewModel) {
$.ajax({
type: "GET",
url: urlPath + '/GetGenes',
dataType: "json"
}).done(function(result) {
if (result) {
if (result.Success) {
var geneData = result.Data;
viewModel.genes = result.Data
}
}
});
};
$(document).ready(function($) {
//apply bindings here
ko.applyBindings(geneViewModel);
getGeneJSONData();
});
回答by Ananthan Unni
You do not need to call ko.applyBindings()repeatedly to refresh your view. Any change in your ViewModelis automatically updated in view because of KnockoutJS's automatic dependency tracking. In your case, ko.applyBindings()is called whenever the AJAX call is completed. Build a one time solution like for the first time you get the data from the AJAX call, call ko.applyBindings()with your viewModel and in subsequent calls, just update the viewmodel.
您不需要ko.applyBindings()重复调用来刷新您的视图。ViewModel由于 KnockoutJS 的自动依赖关系跟踪，您的任何更改都会在视图中自动更新。在您的情况下，ko.applyBindings()在 AJAX 调用完成时调用。构建一次性解决方案，例如第一次从 AJAX 调用中获取数据，ko.applyBindings()使用 viewModel 调用，然后在后续调用中更新 viewmodel。
