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/