Question

我正在为这个项目使用dojo工具包。我有一个下拉按钮，其中有一个菜单作为一个孩子，然后有各种菜单项。因为这将是一个＆＃34;生活＆＃34;应用程序，菜单项将随业务增长而变化。我的目标是能够为菜单包含的所有菜单项创建事件监听器。 Dojo提供了一个访问函数＆＃34; getChildren（）＆＃34;我用来生成我想循环的所有菜单项的对象。如果选择该项目，则菜单项具有我希望能够使用的标签和ID。（注意：按钮，菜单和菜单项包含在另一个脚本中，但全局存储在名为layout的数组中，就像我将函数和变量附加到main = []后面一样。）

main = [];


require([
"dojo/dom","dojo/on","dojo/parser","dojo/json","dojo/domReady!"

], function(dom,on,parser,JSON) {

parser.parse();

console.log("Main Start");

//flags

//Listeners

var gpMenuChildren = layout.gpMenu.getChildren();
for (i in gpMenuChildren) {
    var id = gpMenuChildren[i].id;
    var label = gpMenuChildren[i].label;
    console.log(label);
    console.log(id);
    on(dom.byId(id),"click",function() {
        console.log("dom node w/ 'id' of " + id +" was clicked!");
        layout.gpButton.set("value",label);
        main.updateQueryStr();

    });
}

main.updateQueryStr = function updateQueryStr() {
    console.log("updateQueryStr called...");
    layout.cpCentTop.set("content", "Test updateQueryStr");
};


 console.log("Main End");

});

通过console.log（），我可以确认各个ID和标签是正确的，我们可以通过这种方法成功遍历子节点。

这是问题

事件侦听器已成功连接到菜单列表中的每个项目，但是侦听器的函数组件似乎每次都被覆盖，因此只占用循环中最后一个子项的属性（id和label）。换句话说，单击时为每个菜单项记录相同的id和标签值。

是否有任何想法确保创建可以包含来自孩子的适当值的独立事件监听器？

提前致谢！

Answer 1

这是因为变量的内容发生了变化。您可以使用this：

直接从对象中检索ID和标签

console.log("dom node w/ 'id' of " + this.id +" was clicked!");
        layout.gpButton.set("value",this.label);

Answer 2

能够通过简单地将变量从我的循环传递到外部函数来解决闭包和范围的问题，然后外部函数执行数据所需的操作（创建事件监听器）。

    main.createListener = function createListener (id,label) {
    console.log("createListener called...");
    on(dom.byId(id),"click", function () {
        console.log("dom node w/ 'id' of " + id +" and a label of " + label + " was clicked!");
        layout.gpButton.set("value",label);
        main.updateQueryStr(label);
        });
    };

    var gpMenuChildren = layout.gpMenu.getChildren();
    for (i in gpMenuChildren) {
        var id = gpMenuChildren[i].id;
        var label = gpMenuChildren[i].label;
        main.createListener(id,label);
    }

JavaScript - 动态创建事件监听器

2 个答案: