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
最低0.47元/天 解锁文章
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
