将 onClick 侦听器连接到 Dojo 小部件

Connect onClick listener to Dojo widget

本文关键字:Dojo 小部 连接 onClick 侦听器      更新时间:2024-06-19

我有以下函数:

function setAccounts(data){
    var node = dijit.byId("res");
    dojo.empty("res");
    for(var i = 0; i <= data.length; i++){
        var itemWidget = new dojox.mobile.ListItem({
            id: data[i].id,
            rightText: "€ "+data[i].amount,
            moveTo: "transactions",
            label: data[i].name
        });
        node.addChild(itemWidget);
        dojo.connect(itemWidget, "onclick", getTransactions(data[i].id));
    }
}

在页面加载时,它不会将新 itemWidget 的 onClick 事件连接到函数 getTransactions,但它只是运行该函数。错误在哪里?

数据是通过 ajax 获得的 json,我已经检查过 json 读取/解析中没有错误。

Dojo的"connect"方法期望HTMLElement作为第一个参数。但是,您创建的 dojo 小部件实际上是非常专业的 JavaScript 对象 - 尽管它们倾向于在 .domNode 属性下提供它们的 HTMLElement。

实际上,我知道的最简单的解决方案是使用ListItem中可用的onClick属性。

var itemWidget = new dojox.mobile.ListItem({
        id: data[i].id,
        rightText: "€ "+data[i].amount,
        moveTo: "transactions",
        label: data[i].name,
        onClick: dojo.hitch(this, 'getTransactions', data[I].id)
    });

如果您最终connect将其他事件发送到小部件,我建议您将其编写为itemWidget.connect(targetNode, etc - 据我所知,如果/当小部件本身被销毁时,这将删除事件侦听器。

你的函数立即运行一次的原因是因为你在这里调用它:

dojo.connect(itemWidget, "onclick", getTransactions(data[i].id));

你应该做的是传递一个函数,该函数将在稍后单击元素时调用。您可以使用 dojo.partial 执行此操作,这将创建一个函数,该函数在调用时将使用特定参数调用。您还可以显式传递小部件的 DOM 节点,这是@Katana314提到的。如果要保留当前的代码布局,可以执行此操作,以防此时无法轻松修改项的创建。

dojo.connect(itemWidget.domNode, "onclick", dojo.partial(getTransactions, data[i].id));

试试这个,

function setAccounts(data){
    var node = dijit.byId("res");
    dojo.empty("res");
    for(var i = 0; i <= data.length; i++){
        var itemWidget = new dojox.mobile.ListItem({
            id: data[i].id,
            rightText: "€ "+data[i].amount,
            onclick:getTransactions,
            moveTo: "transactions",
            label: data[i].name
        });
        node.addChild(itemWidget);
    }
}
var getTransactions=function(){
//your code.
}