StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'm a bit confused, since you were already doing this in the <a href="https://stackoverflow.com/questions/4800261/dojo-tree-event-on-root-nodes">last question you posted</a>.</p> <p>You've got a few choices, depending on what you want to do.</p> <h2>Clobbering method stubs</h2> <p>In the case of true stubs like <code>onClick</code>, it's potentially as easy as clobbering that method on your widget instance.</p> <p>Programmatically:</p> <pre><code>var myWidget = new dijit.Tree({ ..., onClick: function(item, node, evt) { /* handler code here */ } }; </code></pre> <p>Or declaratively (this is exactly the same as what you were doing in your last question):</p> <pre><code><div dojoType="dijit.Tree" ...> <script type="dojo/method" event="onClick" args="item,node,evt"> /* handler code here */ </script> </div> </code></pre> <h2>Connecting to method invocations</h2> <p>In other cases, perhaps you need to do something whenever a given method gets called, in which case you could use the widget's <code>connect</code> method (which is a nicer version of <code>dojo.connect</code> that will automatically clear itself when the widget is destroyed). In that case you could do something like this:</p> <p>Programmatically:</p> <pre><code>//execute the given function whenever myWidget's onClick method is called myWidget.connect(myWidget, 'onClick', function(item, node, evt) { /* handler code here */ }); </code></pre> <p>Declaratively, this can be done very similarly to the above, except instead of <code>type="dojo/method"</code>, make sure you use <code>type="dojo/connect"</code></p> <pre><code><div dojoType="dijit.Tree" ...> <script type="dojo/connect" event="onClick" args="item,node,evt"> /* handler code here */ </script> </div> </code></pre> <p>Note that when you connect like this, your code will execute <em>after</em> the method whose invocation you are connecting to. If you need to do something <em>before</em>, your best option is probably to <code>dojo.declare</code> your own extension to the widget. If you need to go that far, I'll elaborate, but I think you'll likely be set with one of the above options.</p> <h2>Edit #1: Connecting the dots (no pun intended...oh heck, yes it was)</h2> <p>Since it seems that my comment appended to my <a href="https://stackoverflow.com/questions/4800261/dojo-tree-event-on-root-nodes/4801040#4801040">answer to the original question</a> was somehow not clear enough, here's a code block modifying the original code in that question based on the simple two steps <em>exactly</em> as I explained in that comment. The only tiny wrinkle is that the arguments passed to <code>_onClick</code> are slightly different.</p> <pre><code><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> </code></pre> <p>This solution may feel a bit sub-optimal since it involves connecting to a method that's suggested to be private. However, it's a way that should work regardless of whether <code>openOnClick</code> is true or not. If you are certain you're going to have <code>openOnClick</code> set to <code>true</code>, you could potentially write a single function, then connect it to both <code>onClick</code> and <code>onOpen</code> instead (both get passed the item, then the node).</p> <h2>Edit #2: Common functions, connecting programmatically</h2> <p>To answer your follow-up questions, I'd like to actually address them in reverse order - since if you are interested in connecting programmatically, it will actually make the other question easier to answer.</p> <p>So first, to answer your <code>connect</code> question: you definitely don't want to be using <code>dojo.byId</code>, as that's not giving you the Tree widget, that's giving you some DOM node (probably the topmost) associated with the widget. As a general rule, <code>dojo</code> methods don't know anything about <code>dijit</code> stuff.</p> <p>What you do want to be doing, is what I suggested above. Here it is applied as per the code you attempted. Also note that <code>onClick</code> has a <em>capital</em> C - another general rule: widget events use camel case notation, as a way to distinguish them from plain DOM events which don't.</p> <pre><code>var mytree = dijit.byId("mytree"); mytree.connect(mytree, "onClick", function(item) { /* ... */ }); </code></pre> <p>Now, to take that a step further and resolve your other inquiry, if you want to bind some common functionality to <code>onClick</code> and <code>onOpen</code> and <code>onClose</code>, you could define a function first, then connect it to both. This is one of the many things that makes JavaScript awesome - the availability of functions as first-class objects that can be easily passed around.</p> <pre><code>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); </code></pre> <p>Now there's one important remaining question: where should we <em>do</em> this? The best place is likely inside a function passed to <code>dojo.ready</code> (or <code>dojo.addOnLoad</code>, same thing, <code>ready</code> was added as a synonym in 1.4) so that it will run only after:</p> <ul> <li>The DOM is parsed by the browser</li> <li>All <code>dojo.require</code>d modules have loaded</li> <li>If you set <code>parseOnLoad: true</code> in <code>djConfig</code>, all widgets defined in the document's HTML will already be instantiated</li> </ul> <p>So, sometime after your <code>dojo.require</code>s, in script, you'd do this:</p> <pre><code>dojo.ready(function() { /* code from previous example goes here */ }); </code></pre> <p>Give it a shot.</p> <p>Also, if you're interested in a bit of reading, I've actually written about a couple of topics I touched on in this edit:</p> <ul> <li><a href="http://kennethfranqueiro.com/2010/06/of-dijits-and-dom-nodes/" rel="nofollow noreferrer">Of Dijits and DOM Nodes</a></li> <li><a href="http://kennethfranqueiro.com/2010/08/dojo-required-reading/" rel="nofollow noreferrer"><code>dojo.require</code>d Reading</a></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload