In this recipe, we'll be covering how to leverage pieces of Dojo and the Dijit framework to create your own custom widgets, specifically covering use of dijit/_WidgetBase and dijit/_TemplatedMixin to quickly and easily set up your widget.
在这个菜谱中,我们将介绍如何利用Dojo和Dijit框架创建您自己的自定义小部件,特别是使用dijit/_WidgetBase和dijit/_TemplatedMixin来快速轻松地设置小部件。
Introduction简介
The Dojo Toolkit ships with the Dijit framework, which is a set of graphical controls called widgets. We can build graphical user interfaces with these widgets.
Dojo工具箱是与Dijit框架一同运行的,Dijit框架是一套称为widget的图形控件。我们可以使用这些小部件创建用户界面。
You may require a specific widget that is not provided by Dojo. In this case, you can use Dijit's core in order to build this widget with more ease.
您可能需要Dojo没有提供的特定小部件。在这种情况下,您可以使用Dijit的核心来更轻松地构建这个小部件。
Setup
For our scenario, let's say that we have a data source somewhere, in JSON format, listing a series of authors, such as those who've penned a tutorial for Dojo. We happen to have that, and it looks something like this:
对于我们的场景,假如我们有一个数据源,以JSON格式,列出了一系列的作者,例如Dojo作者。它看着像下面这样:
[
{
"name": "Brian Arnold",
"avatar": "/includes/authors/brian_arnold/avatar.jpg",
"bio": "Brian Arnold is a software engineer at SitePen, Inc., ..."
},
/* More authors here... */
]
We also know that we want our end result to live in a page, somewhere like this:
我们也知道我们希望我们的最终结果是活在一个页面上,就像这样:
<body>
<!-- Headers and whatnot -->
<h2>Authors</h2>
<div id="authorContainer">
<!-- Authors go here! -->
</div>
</body>
We'll also say that we want it to be a little fancy—perhaps we get a background color to fade in as we mouse over it. Eventually, we want it to look something like this:
我们也会说,我们希望它有点小花哨——当我们鼠标从上面移开时也许我们得到一个背景色淡入。最终,我们希望它看起来像这样:
Solution解决办法
We can create our own widget by following a simple series of steps.
我们可以通过以下一系列简单的步骤创建我们自己的widget。
- Create some file structure for our custom widget为我们自定义小部件创建一些文件结构
- Create markup that will represent an individual author创建标签表示一个单独的作者
- Augment our author markup to make it a Dijit template增强我们的作者标签使之成为一个Dijit模板
- Create our widget class using
declare使用declare创建我们的小部件类
- Style as appropriate添加适当的样式
Step 1: Create a file structure for our custom widget
第一步:为我们自定义小部件创建一个文件结构
While this step is arguably option