Javascript Dijit 1.7+小部件：如何将事件逻辑与当前事件逻辑分离_Javascript_Model View Controller_Dojo_Dom Events

Javascript Dijit 1.7+小部件：如何将事件逻辑与当前事件逻辑分离

javascript model-view-controller dojo

Javascript Dijit 1.7+小部件：如何将事件逻辑与当前事件逻辑分离,javascript,model-view-controller,dojo,dom-events,Javascript,Model View Controller,Dojo,Dom Events,基本上，有两种方法可以使用Dijit创建小部件实例：声明式和编程式。我想要的是两者的混合：使用声明性方法设置像iconClass这样的道具，但将事件处理留给外部脚本块我试图用dojo/on直接添加事件逻辑，但没有成功。我用dojo/dom.byId和dijit/registery.byId检索了小部件，两者都不起作用。因此，我的解决方案是将事件道具链接到全局函数，如下所示： <body class="claro"> <script type="text/javascript"

基本上，有两种方法可以使用Dijit创建小部件实例：声明式和编程式。我想要的是两者的混合：使用声明性方法设置像iconClass这样的道具，但将事件处理留给外部脚本块

我试图用dojo/on直接添加事件逻辑，但没有成功。我用dojo/dom.byId和dijit/registery.byId检索了小部件，两者都不起作用。因此，我的解决方案是将事件道具链接到全局函数，如下所示：

<body class="claro">
<script type="text/javascript">
    require([
        "dojo/dom",
        "dojo/on",
        "dijit/registry",
        "dijit/form/Button",
        "dojo/parser",
        "dojo/domReady!"
    ], function (dom, on, registry) {
        // both don't work
        // on(dom.byId("btn1"), "click", function () {alert("hi");});
        // on(registry.byId("btn1"), "click", function () {alert("hi");});

        // this one works
        btnClickListener = function(){alert("hi")};
    });
    // the global function
    var btnClickListener;
</script>

<button id="btn1" data-dojo-type="dijit.form.Button"
        data-dojo-props="iconClass: 'dijitIconNewTask', showLabel:false">
</button>
<button id="btn2" data-dojo-type="dijit.form.Button"
        data-dojo-props="iconClass: 'dijitIconNewTask', showLabel:false, onClick:btnClickListener">
</button>

</body>

有没有更好的解决办法

dojo/on可以工作，但是您的registry.byIdbtn1返回undefined，因为在执行代码时，dijit尚未实例化。将您的代码包装到dojo/ready中，正如您在这个jsFiddle中所看到的：

wow，这就是工作！！谢谢顺便说一句，你能告诉我dojo/ready和dojo/domReady有什么区别吗？感谢againDojo文档：但是，与domReady不同，dojo.ready实现了一个优先级队列，因此应用程序可以通过为每个回调设置优先级来注册首先触发的回调。这样，当使用parseOnLoad时，dojo/解析器被设置为在用户回调运行之前运行。在这些情况下，dojo.ready对于依赖于特定执行顺序的小部件或其他代码仍然很有用。