在这个教程中，我们将会演示如何利用Dojo 和Dijit框架来创建自定义的小部件，主要会使用到dijit/_WidgetBase and dijit/_TemplatedMixin。
Dojo的Dijit 库包含了丰富的界面小部件（Widgets），通过使用这些小部件，可以打造出强大的Web应用界面，从高级的表单元素，到复杂页面布局。
假设我们需要开发一个能展示所有Dojo教程作者的简介信息的页面，我们手头的数据源是如下的JSON数据：
[
{
"name": "Brian Arnold",
"avatar": "/includes/authors/brian_arnold/avatar.jpg",
"bio": "Brian Arnold is a software engineer at SitePen, Inc., ..."
},
/* More authors here... */
]
我们的需求是把这些信息以下面的DOM结构展示在页面上：
<body> <!-- Headers and whatnot --> <h2>Authors</h2> <div id="authorContainer"> <!-- Authors go here! --> </div> </body>
当然，我们希望这个展示页面可以再加点效果，例如当鼠标移到某个作者上时，背景色可以淡入显示。最终展示的页面效果如下：
解决方案：
可以创建一个自定义的Dojo小部件来实现这一需求，分如下几个步骤：
1. 创建必要的小部件目录结构
2. 创建展示单个作者的HTML片段
3. 把HTML片段变成Dijit模板
4. 使用dojo/_base/declare来创建小部件类
5. 进行必要的CSS美化
1、为自定义小部件创建必要的目录结构
虽然这一步看起来有些多余，但是为你开发的自定义小部件安排一个合理的目录结构是一种良好的编程习惯的。在这里我会创建一个名为custom的目录，作为存放我所有代码和模板的命名空间。当然目录的名称完全取决于你自己，可以是你就职的机构的名称。然后我为即将创建的自定义小部件取名叫AuthorWidget，所以我会创建一个AuthorWidget目录，这个目录会包含与这个小部件相关的css和html模板以及源代码。最终的文件结构会如下图所示：
2、创建展示单个作者的HTML片段
这里我们使用如下的简单片段来展示一个作者的信息。最外层是一个容器div，记住创建Dijit模板时一定要有一个唯一的根节点。这里这个容器div就是我们模板的根节点。然后我们使用一个H3标签来展示作者名字，一个img标签来展示头像，一个p标签来展示作者的简介。
<div> <h3>Brian Arnold</h3> <img src="/includes/authors/brian_arnold/avatar.jpg"> <p>Brian Arnold is a software engineer at SitePen, Inc., ...</p> </div>
3、把HTML片段变成Dijit模板
当使用dijit/_TemplatedMixin时，你对模板会有许多操作的方式：
1. 你可以在模板中自动插入变量值
2. 你自己在模板中定义附着点元素（attach point），这样你在widget中引用并编程操纵这些DOM元素
3. 可以在模板中的元素上设定DOM事件的处理函数
在这个例子里，我们主要会用到自动的变量值插入。现在我们来创建文件: custom/AuthorWidget/templates/AuthorWidget.html，文件的内容基本和第二步中的HTML片段相似，只是会添加一些Dijit模板特有的属性。
<div>
<h3 data-dojo-attach-point="nameNode">${name}</h3>
<img class="${baseClass}Avatar" src="" data-dojo-attach-point="avatarNode">
<p data-dojo-attach-point="bioNode">${!bio}</p>
</div>
在这一模板中：
1. 我们使用 ${attribute}的语法来直接插入一些值，例如这里我们插入了作者姓名${name}
2. 类似的，还有一种语法是${!attribute}。这两者的区别是，${!attribute} 会对值原样插入而不做转义。在这里我们在${!bio}位置要替换的值会包含一些HTML标记，我们不希望dijit/_TemplatedMixin 对这些标记做转义。
3. 所有基于 dijit/_WidgetBase的小部件都有一个baseClass属性。
4. 在上述模板中，我为每个节点都定义了附着点属性，这样在我的代码中就可以直接使用诸如myAuthor.nameNode这样的代码直接访问到H3节点。
你也许已经注意到了我在模板中的img标签里没有指定src属性值。 那么如果我们的数据里某个作者没有包含头像图片怎么办？我们需要能够在创建我们的小部件时自动设定处理这类情形的默认值。后面的步骤会进一步解释如何解决这个问题。
4、使用dojo/_base/declare创建小部件类
这一步我们要在custom目录里创建AuthorWidget.js，并且我们添加一个默认的头像的图片文件。创建之后的目录和文件结构如下：
在AuthorWidget.js 里我们将使用dojo/_base/declare创建我们的小部件类，如下：
// custom.AuthorWidget.js
dojo.provide("custom.AuthorWidget");
// 声明依赖的模块和基类
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
// Create our widget!
dojo.declare("custom.AuthorWidget", [dijit._Widget, dijit._Templated], {
/* 我们的自定义小部件属性将会被添加在这里 */
}) // and that‘s it!
参考：
http://blog.csdn.net/dojotoolkit/article/details/6688058
http://www.ibm.com/developerworks/cn/web/wa-aj-dojotool/