dojo如何重写dijit类方法

xmakbtuz  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(193)

我需要覆盖Tree.js中的onClick方法。有没有覆盖dojo/dijit类方法的通用方法?

ep6jt1vc

ep6jt1vc1#

我有点困惑,因为您已经在last question you posted中执行了此操作。
你有几个选择,取决于你想做什么。

Clobbering方法小作品

对于像onClick这样的真正存根,可能就像在小部件示例上使用该方法一样简单。
方案方面:

var myWidget = new dijit.Tree({
    ...,
    onClick: function(item, node, evt) {
        /* handler code here */
    }
};

或者陈述性地(这和你在上一个问题中所做的完全一样):

<div dojoType="dijit.Tree" ...>
    <script type="dojo/method" event="onClick" args="item,node,evt">
        /* handler code here */
    </script>
</div>

连接到方法调用

在其他情况下,当一个给定的方法被调用时,你可能需要做一些事情,在这种情况下,你可以使用小部件的connect方法(这是dojo.connect的一个更好的版本,当小部件被销毁时,它会自动清除自己)。
方案方面:

//execute the given function whenever myWidget's onClick method is called
myWidget.connect(myWidget, 'onClick', function(item, node, evt) {
    /* handler code here */
});

声明性地说,这与上面的操作非常相似,只是要确保使用type="dojo/connect"而不是type="dojo/method"

<div dojoType="dijit.Tree" ...>
    <script type="dojo/connect" event="onClick" args="item,node,evt">
        /* handler code here */
    </script>
</div>

注意,当你这样连接时,你的代码将在你所连接的方法的调用之后执行。如果你需要在之前做一些事情,你最好的选择可能是将你自己的扩展dojo.declare到小部件。如果你需要走那么远,我会详细说明,但我认为你可能会被设置为上述选项之一。

编辑#1:连接点(没有双关语...哦,见鬼,是的,它是)

由于我对原始问题的回答所附加的注解似乎不够清楚,因此这里有一个代码块,它根据我在注解中解释的简单的两个步骤修改了该问题中的原始代码。唯一的小问题是传递给_onClick的参数略有不同。

<div dojoType="dijit.Tree" ...>
    <script type="dojo/connect" event="_onClick" args="node,evt">
        /* handler code here. In this case, item is accessible via node.item */
    </script>
</div>

这个解决方案可能感觉有点次优,因为它涉及到连接到一个被建议为私有的方法。然而,无论openOnClick是否为真,它都应该工作。如果你确定要将openOnClick设置为true,你可以编写一个函数,然后将其连接到onClickonOpen(两者都传递项目,然后是节点)。

编辑#2:常用函数,以编程方式连接

为了回答您的后续问题,我想实际上以相反的顺序解决它们-因为如果您对编程连接感兴趣,它实际上会使另一个问题更容易回答。
首先,回答您的connect问题:你肯定不想使用dojo.byId,因为它不会提供Tree小部件,而是提供一些与小部件关联的DOM节点(可能是最上面的)。一般来说,dojo方法对dijit一无所知。
你想要做的就是我上面建议的。这里它是按照你尝试的代码来应用的。还要注意onClick有一个 capital C --另一个一般规则:小部件事件使用驼峰式表示法,以区别于不使用驼峰式表示法的普通DOM事件。

var mytree = dijit.byId("mytree");
mytree.connect(mytree, "onClick", function(item) {
    /* ... */
});

现在,为了进一步解决您的其他问题,如果您想将一些常见功能绑定到onClickonOpenonClose,您可以先定义一个函数,然后将其连接到这两个函数。这是JavaScript之所以如此出色的原因之一--函数作为第一类对象的可用性,可以很容易地传递。

function handleClick(item) {
    /* do stuff here.
    Inside this function you can assume 'this' is the tree,
    since connect will ensure it runs in-context.
    */
}
var mytree = dijit.byId("mytree");
mytree.connect(mytree, "onClick", handleClick);
mytree.connect(mytree, "onOpen", handleClick);
mytree.connect(mytree, "onClose", handleClick);

现在还有一个重要的问题:我们应该在哪里做这个?最好的地方可能是在传递给dojo.ready的函数内部(或者dojo.addOnLoad,同样的事情,ready在1.4中被添加为同义词),这样它只会在以下情况下运行:

  • DOM由浏览器解析
  • 已加载所有dojo.require d模块
  • 如果在djConfig中设置parseOnLoad: true,则文档HTML中定义的所有小部件都将已示例化

因此,在脚本中,在dojo.require s之后的某个时间,您可以执行以下操作:

dojo.ready(function() {
    /* code from previous example goes here */
});

给予它一个镜头。
另外,如果你有兴趣阅读一读,我实际上已经写了一些我在这次编辑中提到的主题:

rqenqsqc

rqenqsqc2#

您可以用途:

dojo.connect(tree, 'onClick', function(item) {
    /** Your Action **/
});

相关问题