Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
titleBindAnchor.js
webwork.widgets.HTMLBindAnchor = function() {
//lots removed for clarity
	this.widgetType = "BindAnchor";
	this.templatePath = dojo.uri.dojoUri("webwork/widgets/BindAnchor.html");

	// the template anchor instance
	this.anchor = null;
//lots removed
		self.anchor.href = "javascript:{}";

		dojo.event.kwConnect({
			srcObj: self.anchor,
			srcFunc: "onclick",
			adviceObj: self,
			adviceFunc: "bind",
			adviceType: 'before'
		});
		
//snippet removed		
    }

}


// make it a tag
dojo.widget.tags.addParseTreeHandler("dojo:BindAnchor");

...

Code Block
titleBindAnchor.html

     <a dojoAttachPoint="anchor"></a>

This template simply tells dojo one thing. the dojoAttachPoint. This attribute dojoAttachPoint is the javascript variable in the widget file to attach thid DOM object to. If you review the above widget code you will see a variable declaration called this.anchor = null; Dojo will plug this DOM object into that variable so its availabe in the widget JS. COOL.

OK... lets look at a more complex template file.

Code Block
titleBindButton.html

<input dojoAttachPoint="attachBtn" dojoAttachEvent="onClick: bind" type="submit" />

This is the code for the button template. Again its got the dojoAttachPoint attribute, but its also got dojoAttachEvent. This is based on the DOJO event system. the dojoAttachEvent property gives us a mapping between what the DOM Node's event name is (onClick) and what logical action to take as a result (bind). This is how the the dojo widget code itercepts the button click code and calls the bind function.