Dojo，创建复合小部件

Question

我正在使用 dojo 1.10，并且正在拼命寻找一种干净的方法来创建复合小部件，

我有以下代码：

TabsWidget.js

require([......], function(.....template ....){

var Tabs = declare('...', [....], {

 templateString : template,
 region : 'center'

});

var o = new Tabs({}, 'container');

widget.startup();

});

TabsWidget.html


<div style="width: 100%; height: 100%;">
     <div-dojo-type="dijit/layout/TabContainer" style="..">
           ......Content pane........
     </div>
</div>

home.html

......
 <div data-dojo-type="TabsWidget"></div>

选项卡呈现良好，它们显然是空选项卡，这里的目标是定义一个单独的小部件，其中包含一个网格，也许还有一个搜索表单。

然后我想在我的一个内容窗格中声明此小部件，但不确定如何执行此操作。

任何人都可以解释这是如何工作的，或者向我指出 tutorial/document 指定如何最好地做到这一点？

提前致谢。

Answer 1

查看 creating template-based widgets 上的 Dojo 文档。

要将 TabsWidget 用作标准小部件，它的组织方式需要稍有不同。特别是：

使用 define 来定义您的窗口小部件模块，而不是 require
Return 从您的模块中声明的 class。

更像是：

define([ ... ], function ( ..., template, ...) {
   return declare([ ... ], {
       templateString: template,
       ...
   });
 });

此外，您通常会在创建小部件时设置 'region' 属性，而不是在定义小部件时设置。您的小部件本身可能不使用 'region'；它的目的是告诉容器将小部件放在哪里。所以：

<div data-dojo-type="TabsWidget" data-dojo-props="region:center"></div>

Answer 2

为了轻松实现这一点，您可以创建一个基于父模板的小部件，其中一个父 div 例如：<div data-dojo-attach-point="parentDiv"> </div>并将您的选项卡或内容窗格放入其中，然后创建另一个模板基于单独的小部件，您可以从父小部件实例化该小部件（包含网格或搜索框）并将该小部件放置在内容窗格 div 标记中。您可以从子小部件发出事件，以便可以在该事件上触发任何功能。

在 dojo 中创建基于模板的小部件的导师：http://haritechtalk.blogspot.in/2015/09/how-to-create-template-based-widget-in.html

Dojo，创建复合小部件

Dojo, creating composite widgets

dojo

widget

composition