获取 KnockoutJs 错误您不能多次将绑定应用于同一元素答案

【问题标题】：getting KnockoutJs error You cannot apply bindings multiple times to the same element获取 KnockoutJs 错误您不能多次将绑定应用于同一元素
【发布时间】：2014-04-13 19:48:51
【问题描述】：

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

这是代码片段

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

});

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

【问题讨论】：

您只需要应用一次绑定。无需为 AJAX 请求创建新的 ViewModel，只需使用相同的 ViewModel 并更新其属性即可。
因为每次你发出 ajax 请求时，你都在调用 applybinding 不要那样做。

标签： javascript knockout.js

【解决方案1】：

您只需要应用一次绑定。无需为 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();
});

【讨论】：

嗨，我在这里（jsfiddle.net/DBBUL/47）创建了我的初始代码的工作示例，然后我在此处应用了您建议的更改（jsfiddle.net/DBBUL/53）并且初始数据没有被加载。不知道为什么它不工作
问题是当你创建你的视图模型geneData时没有定义。
当我有硬编码数据时，这似乎可以工作。但是当使用 getGeneJSONData 进行 ajax 调用时，数据没有填充
打开您的开发者控制台并检查控制台是否有错误和网络选项卡以查看您的请求发生了什么。

【解决方案2】：

您无需反复调用ko.applyBindings() 即可刷新您的视图。由于 KnockoutJS 的自动依赖跟踪，您的 ViewModel 中的任何更改都会自动更新。在您的情况下，只要 AJAX 调用完成，就会调用 ko.applyBindings()。构建一次性解决方案，例如您第一次从 AJAX 调用中获取数据时，使用您的 viewModel 调用 ko.applyBindings()，在随后的调用中，只需更新 viewmodel。

【讨论】：