dojoAttachPoint: what it is and what it is for
In the Javascript of a widget, you often might wish to refer to some of its html template's dom nodes directly. For example in the dijit.layout.AccordionPane widget, the js might want to access the nodes for the title, the title's text, the container or accordion pane, and so on.
You might think the widget author could just use ids in the html template, and then dojo.byId() in the widget's js. But if she does, then if two or more widget instances are created, they'll all have the same ids! Obviously the Javascript code will blow up then.
Instead, you the widget author must do the following:
1. In your widget's template html, for every node that these
variables are supposed to correspond to (eg point to), you add the
attribute: dojoAttachPoint="yourVariableNameHere".
The code below is from the Accordion widget that ships with Dojo, from the file AccordionPane.html. The attach points are in red.
<div class='dijitAccordionPane'
><div dojoAttachPoint='titleNode,focusNode' dojoAttachEvent='ondijitclick:_onTitleClick,onkeypress:_onTitleKeyPress,onfocus:_handleFocus,onblur:_handleFocus'
class='dijitAccordionTitle' wairole="tab"
><div class='dijitAccordionArrow' waiRole="presentation"></div
><div class='arrowTextUp' waiRole="presentation">▲</div
><div class='arrowTextDown' waiRole="presentation">▼</div
><div waiRole="presentation" dojoAttachPoint='titleTextNode' class='dijitAccordionText'>${title}</div></div
><div><div dojoAttachPoint='containerNode' style='overflow: hidden; height: 1px; display: none'
class='dijitAccordionBody' wairole="tabpanel"
></div></div>
</div>
2. In your widget's js, use variables
for these nodes, but do not declare them.
[From file: AccordionContainer.js]
getTitleHeight: function(){
// summary: returns the height of the title dom node
return dojo.marginBox(this.titleNode).h; // Integer
},
The variables are undeclared because when when the parser scans the html from step 1, it finds the attach point names in the dojoAttachPoint attributes, and declares variables with those names. In the example above, the parser would find "<div dojoAttachPoint='titleNode,focusNode'>". It would then do "var titleNode" and "var focusNode", and set both variables to the DOM element <div dojoAttachPoint='titleNode,focusNode'>...</div>. Because of this, all uses of "titleNode" and "focusNode" in the widget's Javascript would be references to that DOM element. Thus the parser attaches DOM nodes, called attach points, to Javascript variables in the widget's Javascript file.
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License.