javascript - 获取 KnockoutJs 错误您不能将绑定(bind)多次应用于同一元素

Question

当页面加载时，我通过调用 getGeneJSONData() 获取数据，当我执行数据库更新时，我调用相同的方法来加载新数据，但我收到错误消息“您不能对同一元素多次应用绑定(bind)”

这是代码片段

    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();

});

我不确定为什么在重新加载数据时会出现此错误。我是否必须在再次应用之前删除绑定(bind)？

Answer 1

您只需应用一次绑定(bind)。无需为 AJAX 请求创建新的 ViewModel，只需使用相同的 ViewModel 并更新其属性即可。

我建议您通过在文档就绪函数中应用绑定(bind)并将 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();
});