Knockout JS - 你不能多次将绑定应用于同一个元素 - MVC

【问题标题】：Knockout JS - you cannot apply bindings multiple times to the same element - MVCKnockout JS - 你不能多次将绑定应用于同一个元素 - MVC
【发布时间】：2020-03-12 17:22:28
【问题描述】：

我是淘汰 js 的新手，不明白为什么会出现此错误。

我在 .net mvc 中有一个视图，当单击按钮时，使用 jquery 使用 ajax 查询数据库，然后返回数据，然后我将其传递给敲除进行渲染，当您单击按钮时，它会打开一个模式窗口并很好地显示数据，但它只执行一次，每次显示多元素错误后都会显示一次。

有什么想法吗？

 var ViewModel = function (docs) {

  this.docs = ko.observable(docs);

};

$('.js--click').click(function () {

    var id = $(this).data('id');

        $.post("GetData", { id: id })
           .done(function (data) {

             ko.applyBindings(new ViewModel(data.docs));
    });
});


<div data-bind="if: docs()">
<span data-bind="text: docs></span>
</div>

【问题讨论】：

标签： jquery html asp.net-mvc knockout.js

【解决方案1】：

就像错误消息说的：你只能在同一个元素上调用一次ko.applyBindings。您只想更新视图模型上的可观察对象；这不是这样做的方法。

使用 Knockout 做事的标准方法是，您将在视图模型上设置一个函数来获取数据，然后使用这些新数据更新一个 observable，然后 UI 将自动同步。您将使用标准的 KO click 处理程序将点击事件附加到按钮，而不是使用 jQuery。

按照您的示例，您必须按照以下方式做一些事情：

function ViewModel () {
    var vm = this;

    vm.docs = ko.observable();

    vm.getData = function (id) {
        $.post("GetData", { id: id })
         .done(function (data) {
            vm.docs(data.docs);
    });
    }
};

ko.applyBindings(new ViewModel()); // We only do this once!


<button data-bind="click: getData.bind($data, 'myID')"></button>

<div data-bind="if: docs">
    <span data-bind="text: docs"></span>
</div>

【讨论】：