JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
CSS
/*Example of doing styling via CSS classes instead of
inline styles */
.myWidget {
border: solid 10px pink;
}
JavaScript
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require('dijit.form.Button');
dojo.ready(function(){
dojo.declare('MyWidget', [dijit._Widget, dijit._Templated], {
templateString: ('' +
'<div>' +
'<h3>${name}</h3>' +
//dont mix old dojoType w/ new data-dojo stuff:
'<div data-dojo-type="dijit.form.Button" data-dojo-attach-point="removeBtn" class="removeBtn">' +
'Click me.' +
'</div>' +
'</div>'),
widgetsInTemplate: true,
//class to add to the root node of the widget
baseClass: 'myWidget',
name : 'no name',
startup: function(){
//when I override a widget method I always call the parent
//method, just in case. (Sometimes you do it in the end of the function, though):
this.inherited(arguments);
//when connecting to a widget, use onClick with a capital C.
//onclick with lowercase c is for regular HTML buttons.
dojo.connect(this.removeBtn, 'onClick', function(evt){
console.log('removeBtn event');
alert("test");
});
}
});
//if this were 1.7 you would instead inherit from
//dijit_Widget, dijit._TemplatedMixin *and* dijit._WidgetsInTemplateMixin
//without needing to have the widgetsInTemplate flag
w = new MyWidget({name : 'Foo'});
//don't place your widget in the postCreate method; let whoever creates it do that:
w.placeAt(dojo.body());
//startup needs to be called by hand, unless your widget is placed in the HTML declaratively
//and was created via dojo.parse
w.startup();
});
//JSFIDDLE boilerplate:
dojo.ready(function(){
dojo.addClass(dojo.body(), 'claro');
//dojo.parser.parse(dojo.body());
});