Dijit ComboButton / DropDownMenu onclick误解

时间:2012-07-03 14:07:36

标签: javascript javascript-events dojo

我刚刚开始玩Dojo。我只想在点击Dijit ComboButton的DropDownMenu中的项目时显示一个对话框。我尝试使用dojo.connect将onclick事件与一个函数关联起来,该函数只显示一个包含项目中文本的对话框,没有运气。

我设法让它以一种可怕的方式运作。现在所有工作都实际上手动写入onclick属性。我显然在这里误解了一些东西。这就是我目前所拥有的:

JS:

    require(["dijit/form/Button", "dijit/form/FilteringSelect", "dijit/DropDownMenu", "dijit/MenuItem"]);

    //if the following is defined inside dojo.ready, nothing happens
    function getmail(text)
    {
         alert('No mail from '+text);
    }


    dojo.ready(function(){ 
        //the following does nothing:
        dojo.connect(dojo.query(".dijitMenuItemLabel"), "onclick", function(evt) {
            console.log("mail item clicked");
            alert('Blah');
            //dojo.stopEvent(evt);
        });
    });

HTML:

<form method="POST">

    <div data-dojo-type="dijit.form.ComboButton" id="getmail">

        <span>Get All Mail</span>

        <div data-dojo-type="dijit.DropDownMenu">

            <div data-dojo-type="dijit.MenuItem" 
                data-dojo-props="onClick:function(){getmail(dojo.trim(dojo.query('.dijitMenuItemLabel', this.domNode)[0].innerHTML))}">
                Yahoo</div> 

            <div data-dojo-type="dijit.MenuItem">Google</div>

        </div>

    </div>

</form>

看起来我显然是对Dojo的误解?

(或者我可能会犯很简单的JavaScript错误)


JSFiddle

1 个答案:

答案 0 :(得分:0)

你应该能够用

之类的东西来做
var myButton = dijit.byId('getmail');
myButton.on('click', function(){ alert('clicked') });

我的猜测是当你拿到你的按钮时你混淆了dojo.byId和dijit.byId - 当你勾勒出一个小写的'onclick'时,常规DOM节点工作但是小部件会触发一个驼峰案例'onClick'事件(区别是因为dijits点击某些键盘事件,以获取辅助功能)。

然而,对于较新版本的Dojo,最好远离dojo.connect,而只是使用我展示的更简单的“.on”API。


啊,在我忘记之前,看起来你可能忘记运行Dojo解析器(或将parseOnLoad设置为true),因此永远不会创建按钮。你能在JSFiddle上提供一个完全可执行的例子吗?