javascript - Event.observe 循环和变量

Question

为了将事情放在上下文中，我正在通过 Ajax 加载项目列表，为每个项目创建一个包含主要信息的 div，并希望在单击它时在页面上显示详细信息。所以我的 onSuccess 中有该代码:

items = transport.responseText.evalJSON(); // my list of objects that contains all the details I'll need for that page
for (var itemID in items)
{
    newDiv = ... // Creating my div with main infos
    $('myDiv').appendChild(newDiv);

    // More code to make everything look pretty and that works fine

    Event.observe(newDiv, 'click', function() { loadItem(itemID); });
}

loadItem 是我的函数，它将显示所有项目详细信息。我的问题是 itemID 在创建观察事件时没有被它的值替换，所以它总是为所有项目返回相同的 ID。

知道如何解决这个问题吗？我检查了原型(prototype)文档上的 bind，它似乎是为那些情况而制作的，但可能没有得到它，因为它对我不起作用。

Answer 1

对于影响最小的修复，请将 Event.observe 行替换为:

Event.observe(newDiv, 'click', loadItem.curry(itemID));

解释:

在您的原始代码中，您正在创建的事件处理程序函数关闭(持久引用)itemID 变量，因此将使用值该变量是在调用 事件处理程序时，而不是在您将其分配给事件时。该值将是 itemID 在循环中的最后一个值——对于所有处理程序函数。 More about closures here.

使用影响最小的修订代码，我们使用 Prototype 的 curry函数，它将为您创建一个函数，当调用该函数时，将使用您给 curry 的参数调用底层函数。 (名称是 from mathematics ；Haskell Curry 提出了这项技术，尽管有人认为他不是第一个这样做的人。)我们可以自己做同样的事情:

items = transport.responseText.evalJSON(); // my list of objects that contains all the details I'll need for that page
for (var itemID in items)
{
    newDiv = ... // Creating my div with main infos
    $('myDiv').appendChild(newDiv);

    // More code to make everything look pretty and that works fine

    Event.observe(newDiv, 'click', prepLoadItem(itemID));
}

function prepLoadItem(id) {
    return function() {
        loadItem(id);
    };
}

...但是因为 Prototype 有一个通用功能，我们不必这样做。

题外话:items是数组吗？如果不是，请忽略此偏离主题的评论。如果是这样，不要使用for..in 循环遍历它，或者至少，除非您采取一些预防措施，否则上面的代码无法正确执行. Details here ，但是 for..in 不是用于遍历数组索引的；它用于遍历对象的属性。数组对象很可能具有数组索引以外的属性(事实上，如果您使用的是 Prototype，它们就有。)