样例一：
<html> <head> <Metacharset="UTF-8"> <linkrel="stylesheet"href="dijit/themes/soria/soria.css"> <scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script> <title>CustomWidget</title> <scripttype="text/javascript"> require([ "dojo/_base/declare","dijit/_WidgetBase","dijit/_TemplatedMixin","dojo/dom-construct","dojo/parser","dojo/domReady!" ],function(declare,_WidgetBase,_TemplatedMixin,domConstruct){ //创建DOM节点小部件 declare("Counter",[_WidgetBase],{ //计数器 _i:1,buildRendering:function(){ //创建该小部件的DOM树 this.domNode=domConstruct.create("button",{ innerHTML:this._i }); },//postCreate函数依赖进行事件连接this.connect或this.disconnect postCreate:function(){ //用户每点击一次按钮，计数器增加1 this.connect(this.domNode,"onclick","increment"); },increment:function(){ this.domNode.innerHTML=++this._i; } }); //模板化小部件 declare("CounterText",[_WidgetBase,_TemplatedMixin],{ //计数器 _i:0,templateString:"<div>"+"<buttondojoAttachEvent='onclick:increment'>增加计数</button>"+" 当前计数:<spandojoAttachPoint='counter'>0</span>"+"</div>",increment:function(){ this.counter.innerHTML=++this._i; } }); }); </script> </head> <bodyclass="soria"> <spandojoType="Counter"></span> <br> <spandojoType="CounterText"></span> </body> </html>
输出结果：
--采用attributeMap将小部件的属性映射为DOM节点的属性、innerHTML或类：
<html>
<head>
<title>BusinessCard</title>
<styletype="text/css">
body,html{margin:0;height:100%;width:100%;}
.businessCard{border:3pxinsetgray;margin:1em;}
.employeeName{color:blue;}
.specialEmployeeName{color:red;}
</style>
<linkrel="stylesheet"href="dijit/themes/tundra/tundra.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require([
"dojo/_base/declare",_TemplatedMixin){
declare("BusinessCard",{
//初始化参数，设置默认属性值
name:"unknown",nameClass:"employeeName",phone:"unknown",//模板文件
templateString:"<divclass='businessCard'>"+"<div>姓名:<spandojoAttachPoint='nameNode'></span></div>"+"<div>电话#:<spandojoAttachPoint='phoneNode'></span></div>"+"</div>",//将小部件的属性映射为DOM节点的属性、innerHTML或类
attributeMap:{
name:{
node:"nameNode",type:"innerHTML"
},nameClass:{
node:"nameNode",type:"class"
},phone:{
node:"phoneNode",type:"innerHTML"
}
}
});
});
</script>
</head>
<bodyclass="tundra">
<spandojoType="BusinessCard"name="陈德选"phone="(010)63981212">
</span>
<spandojoType="BusinessCard"name="刘泊芸"nameClass="specialEmployeeName"phone="(010)63967113">
</span>
</body>
</html>
输出：