javascript - DojoToolkitでのコードの再利用

Question

DojoToolkitを使用してモバイルアプリケーションを実装しています。アプリケーションには複数のページがあり、すべてのページに同じ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/