当页面加载时,我通过调用getGeneJSONData()获取数据,当我执行数据库udpate时,我调用相同的方法来加载新数据,我得到错误“你不能多次将绑定应用于同一个元素”
这是代码剪辑
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();
});
我不确定为什么我在数据重新加载时遇到此错误。在再次应用它们之前是否必须删除绑定?
答案 0 :(得分:2)
您无需反复拨打ko.applyBindings()
来刷新视图。由于KnockoutJS的自动依赖关系跟踪,ViewModel
中的任何更改都会自动更新。在您的情况下,只要AJAX调用完成,就会调用ko.applyBindings()
。构建一次性解决方案,就像第一次从AJAX调用中获取数据一样,使用viewModel调用ko.applyBindings()
,在后续调用中,只需更新viewmodel。
答案 1 :(得分:2)
您只需要应用一次绑定。不要为AJAX请求创建新的ViewModel,只需使用相同的ViewModel并更新其属性。
我建议您通过在文档就绪函数中应用绑定并将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();
});