Ajax调用后，在Jquery .each循环中应用Knockout绑定

Apply Knockout bindings in Jquery .each loop after Ajax call

本文关键字：循环 应用 Knockout 绑定 each Jquery 调用 Ajax      更新时间：2023-09-26

我有一堆元素应用到一个页面。它们是。ascx控件，每个控件都有特定的数据，但格式相同。

我需要为这些元素中的每个元素创建一个特定视图模型的删除绑定，以使它们正常工作。因此，目前我等待dom加载并循环遍历每个元素，应用一个新的绑定，如下所示:

$(function () {
    var target;
    $(".wrapper").each(function (index) {
        target = this;
        $.ajax({
            url: getLink,
            data: 'AllData',
            async: false,
        }).done(function (data) {
                vm = new myViewModel(data);
                ko.applyBindings(vm, target);
        });           
    });
});

问题在于这个Ajax调用嵌套在.each循环的中间。如果我设置了async: false，它会正确执行，但是感觉很慢，并且页面不允许许多其他交互工作，直到这个循环完成执行。如果我设置async: true，当Ajax调用出去时，目标不断迭代所以当它返回时，所有这些绑定都应用到一个元素上我得到错误:You cannot apply bindings multiple times to the same element.

您需要确保target是一个捕获的局部变量。您已经在.each()循环之外声明了它，这意味着它正在被重用。你需要在循环中声明它:

$(function () {
    $(".wrapper").each(function (index) {
        var target = this;  //change is here
        $.ajax({
            url: getLink,
            data: 'AllData',
            async: false,
        }).done(function (data) {
                vm = new myViewModel(data);
                ko.applyBindings(vm, target);
        });           
    });
});

在循环之外声明它意味着它在每次迭代中都被覆盖，所以当异步调用返回时，它们都试图绑定到相同的目标元素。

相关文章：