javascript - Dojo Toolkit 中的代码重用

Question

我正在使用 Dojo Toolkit 实现一个移动应用程序。该应用程序有几个页面，所有页面都有相同的 TabBar。目前，每个页面中的 TabBar 都是硬编码的。因此，如果要进行更改，我需要更改每个页面中的 TabBar。如何使用 Dojo Toolkit 解决这个问题？

Answer 1

使用 dojo.declare，创建由 TabBar 扩展的自定义小部件。然后在您的初始化代码中，需要该模块并在您的标记代码中，将 dojoType 设置为您的自定义模块名称。与此类似的东西：

require([
     "dojox/mobile/TabBar", 
     "dojox/mobile/TabBarButton"
  ], function ( TabBar, Button ) {

   dojo.declare("myTabBar", [ TabBar ], {

       buildRendering: function() {
           this.inherited(arguments); // call parent
           // add a number of children
           this.addChild( new Button( {
                icon1: 'path/to/image',
                icon1: 'path/to/hoverimage',
                label: 'clickme',
                moveTo:"view1"
           }));
       }
   });
});

而不是代码中的 UL / LI html 标记，只需添加：

<div dojoType="myTabBar"></div>

运行示例：http: //jsfiddle.net/8sD6A/