如何從其他dojo小部件調用dojo小部件方法？

Question

我已經在Dojo中使用聲明創建了Google地圖窗口小部件，其格式爲createMarker。

該圖可用

<div style='min-height:500px'> 
<div data-dojo-type='testjs/bpl/GoogleMapWidget' data-dojo-attach-point='qWidget'></div> 
</div> 

是越來越顯示的地圖圖示。

1）如何從另一個窗口小部件調用qWidget.createMarker()？

Answer 1

我不清楚你打算怎樣撥打createMarker，因爲你還沒有提供另一個部件的代碼。但是，如果這個小部件是模板化的，您可以參考qWidget和this.qWidget。

舉個例子，如果你的代碼看起來像這樣（從here拍攝）：

define([ 
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dojo/text!./templates/SomeWidget.html" 
], function(declare, _WidgetBase, _TemplatedMixin, template) { 

    return declare([_WidgetBase, _TemplatedMixin], { 
     templateString: template 
    }); 

}); 

而且SomeWidget.html是你的HTML：

<div style='min-height:500px'> 
    <div data-dojo-type='testjs/bpl/GoogleMapWidget' data-dojo-attach-point='qWidget'></div> 
</div> 

您可以訪問qWidget Widget的declare子句中，像這樣：

return declare([_WidgetBase, _TemplatedMixin], { 
    templateString: template, 

    myWidget: this.qWidget //reference to the widget in your template HTML 
}); 

Answer 2

這取決於您的小部件的層次結構。如果其中一個小部件是另一個小部件的子項（例如在另一個小部件的模板中使用），則可以使用data-dojo-attach-point變量中引用的名稱來獲取您的子小部件實例，並調用其上的方法。

因此，假設父窗口部件的模板是你在你的問題張貼的HTML標記：

<div style='min-height:500px'> 
    <div data-dojo-type='testjs/bpl/GoogleMapWidget' data-dojo-attach-point='qWidget'></div> 
</div> 

這意味着你可以使用this.qWidget訪問testjs/bpl/GoogleMapWidget。但是，您必須從dijit/_WidgetsInTemplateMixin繼承來做到這一點（否則，連接點僅適用於DOM節點）。因此，父控件可能看起來像這樣：

define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin" ], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) { 

    return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], { 
     someMethod: function() { 
      this.qWidget.createMarker(); 
     } 
    }); 
}); 

---

如果兩個部件是獨立的（無父的小工具，「控制」它們），然後調用另一個工具的最佳方法是使用dojo/topic模塊。例如：

define([ "dojo/topic", "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin" ], function(topic, declare, _WidgetBase, _TemplatedMixin) { 

    return declare([ _WidgetBase, _TemplatedMixin ], { 
     someMethod: function() { 
      topic.publish("/testjs/createMarker", { }); 
     } 
    }); 
}); 

而其他部件則可以聽吧：

define([ "dojo/topic", "dojo/_base/declare", "dojo/_base/lang", "dijit/_WidgetBase", "dijit/_TemplatedMixin" ], function(topic, declare, lang, _WidgetBase, _TemplatedMixin) { 

    return declare([ _WidgetBase, _TemplatedMixin ], { 
     postCreate: function() { 
      this.inherited(arguments); 
      topic.subscribe("/testjs/createMarker", lang.hitch(this, this.createMarker)); 
     } 

     createMarker: function() { 
      // Do stuff 
     } 
    }); 
}); 

這最後一種方法是偉大的，完全無關的部件通過發佈/訂閱模式相互通信（也稱爲作爲觀察者/可觀察模式）。