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在创建observe事件时不会被其值替换,因此它总是为所有项返回相同的ID.

知道如何解决这个问题吗？我检查了原型文档上的绑定,这似乎是针对那些情况,但可能没有得到它,因为它对我不起作用.

Answer 1

要获得影响最小的修复,请Event.observe将此行替换为:

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

说明:

在您的原始代码中,您正在创建的事件处理函数靠近(具有持久引用)itemID变量,因此将在调用事件处理程序时使用该变量的值,而不是在分配它时的值参加活动.itemID对于所有处理函数,该值将是循环中的最后一个值.关于闭包的更多信息.

使用最小影响修订代码,我们使用Prototype的curry函数,它将为您创建一个函数,在调用时,将使用您提供的参数调用基础函数curry.(这个名字来自数学 ; 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它来循环,或者至少,除非你采取一些预防措施,否则上面的代码不能正确执行.详情点击此处,但for..in就是不通过数组的索引循环; 它用于循环对象的属性.数组对象可能具有除数组索引之外的属性(事实上,如果您使用的是Prototype,它们会这样做.)