获取KnockoutJs错误您无法多次将绑定应用于同一元素

时间:2014-03-10 15:44:16

标签: javascript knockout.js

当页面加载时,我通过调用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();

});

我不确定为什么我在数据重新加载时遇到此错误。在再次应用它们之前是否必须删除绑定?

2 个答案:

答案 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();
});