javascript - 绑定(bind)到 x-editable 的成功函数未使用正确的参数执行

Question

我的页面加载后多次调用以下函数。目的是从服务器增量加载大量格式相似的公司。对于每家公司，我想找到所有 x-editable元素并绑定(bind) success处理函数。每种情况下的成功处理程序都应调用刷新函数，并传入该特定公司的名称和 ID。

这或多或少都有效——公司逐渐加载，我能够找到匹配的 x-editable s并绑定(bind)我的success对他们起作用。

问题是，当页面完全加载并且我使用 x-editable 时编辑一些数据refreshCompany()函数已执行，但错误 company_name和company_guid 。 Refresh. . . 中出现的名称和 ID控制台消息对于容器中的所有公司都是相同的，并且始终是公司列表中的最后一条，而不是 Load. . . 中出现的一条。控制台消息。

我相信可能会发生以下两种情况之一:

• company_name和company_guid由于我不完全理解闭包规则，值仍然绑定(bind)到外部范围中的当前(ish)值。

  • 我的.find('.editable')搜索不是在我新创建的特定于公司的对象上运行，而是在包含所有公司的容器上运行(我最初的实现使用 .append() 而不是 .appendTo() 并且肯定遇到了这个问题)。

如何修改以下代码，使 refreshCompany()将使用函数绑定(bind)时的 name 和 id 值执行？

 function loadCompanies(company_list, container_name, link_container_name) {

    var searchTerm = '#' + container_name;

    for (company of company_list)
    {

        var company_name = company.name;
        var company_guid = company.id;
        console.log('Load ' + company_name + ' ' + company_guid);

        $.ajax(
            {
                url : '${fund.name}/' + encodeURIComponent( company_name ),
                type : 'GET'
            }
        ).done (
            function (company_html) {
                var newElement = $(company_html).appendTo('#' + container_name);
                newElement.find('.editable').editable(
                    {
                        success : function (response, newValue) {
                            console.log('Refresh ' + company_name + ' ' + company_guid)
                            refreshCompany(company_name, company_guid);
                        }
                    }
                );
            }
        );

    }
}

Answer 1

我希望这会有所帮助，但问题似乎是，当您从异步 GET 请求获得响应时，您已经循环了 列表中的所有公司，因此当成功方法运行时， company_name 和 company_guid 绑定(bind)列表中的最后一个公司。

我认为你应该能够通过闭包来解决这个问题。也许类似于在 loadCompanies 之外定义一个函数，例如:

function refreshClosure(companyName, companyGuid) {
	return function () {
		console.log('Refresh ' + companyName + ' ' + companyGuid)
		refreshCompany(companyName, companyGuid);
	}
}

...并在代码中使用它，如下所示:

function loadCompanies(company_list, container_name, link_container_name) {

    var searchTerm = '#' + container_name;

    for (var company in company_list)
    {

        var company_name = company.name;
        var company_guid = company.id;
      
        // Enclose the current value of company_name and company_guid
        var refreshCurrent = refreshClosure(company_name, company_guid);
        
      console.log('Load ' + company_name + ' ' + company_guid);

        $.ajax(
            {
                url : '${fund.name}/' + encodeURIComponent( company_name ),
                type : 'GET'
            }
        ).done (
            function (company_html) {
                var newElement = $(company_html).appendTo('#' + container_name);
                newElement.find('.editable').editable(
                    {
                        success : function (response, newValue) {
                        // Invoke the function returned from the closure
                            refreshCurrent();
                        }
                    }
                );
            }
        );

    }
}

我还更改了 for 语句，以防这是问题的一部分。让我知道这是否有帮助。