Dojo - Creating a custom widget创建自定义小部件

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。

1. Create some file structure for our custom widget为我们自定义小部件创建一些文件结构
2. Create markup that will represent an individual author创建标签表示一个单独的作者
3. Augment our author markup to make it a Dijit template增强我们的作者标签使之成为一