JSFiddle - React, Tailwind, and code Playground
HTML
<div dojoType="WidgetWithTemplate" id="with" myvalue="foo"></div>
<div dojoType="WidgetWithoutTemplate" id="without" myvalue="bar"></div>
JavaScript
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require('dojo.parser');
dojo.ready(function() {
//first an example WITH a template with the trimmings
dojo.declare('WidgetWithTemplate', [dijit._Widget, dijit._Templated], {
myvalue: '',
templateString: '<div><div dojoAttachPoint="mynode" dojoAttachEvent="onclick:onNodeClick"></div></div>',
attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, {
myvalue: {
node: 'mynode',
type: 'innerHTML'
}
}),
onNodeClick: function(evt) {
alert('oi!');
}
});
dojo.declare('WidgetWithoutTemplate', dijit._Widget, {
myvalue: '',
attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, {
myvalue: {
node: 'mynode',
type: 'innerHTML'
}
}),
buildRendering: function() {
//run _Widget's implementation first.
//(This is what makes this.domNode exist!)
this.inherited(arguments);
//create inner div programmatically, and assign
//to instance property - equivalent to attachPoint
this.mynode = dojo.create('div', null, this.domNode);
//connect onclick of the new node to onNodeClick of this
//widget instance - analogous to attachEvent
this.connect(this.mynode, 'onclick', 'onNodeClick');
},
onNodeClick: function(evt) {
alert('oi!');
}
/*
alternatively to having an attributeMap entry for myvalue,
you could instead elect to define a custom setter function
to do whatever you deem necessary when widget.set('myvalue')
is called:
_setMyvalueAttr: function(v) { ... }
NOTE that you cannot...