在Dojo ContentPanes中動態加載小部件

Question

我有一個帶有6個定製小部件的JSP頁面，在TabContainer中。代碼看起來像這樣：

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', gutters:false"> 
    <div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>"> 
     <div data-dojo-type="my/custom/Widget"></div> 
    </div> 
    ...(5 more ContentPanes like this) 
</div> 

當頁面加載時，每個選項卡加載每個小部件，它很慢。大多數情況下，我只需要訪問其中的一個標籤並且不關心其他標籤，因此我決定要動態加載這些內容。

當爲Dojo ContentPane指定href屬性時，該內容將不會被加載或解析，直到選中該選項卡。唯一的問題是，這意味着我將不得不創建6個新的.html文件，除此之外沒有任何內容。這就像是以編程方式加載小部件的聲明性方式......有點奇怪。

有沒有一種方法可以簡單地告訴ContentPane我只是希望它動態加載我的自定義小部件而不必創建html標記？目前，我創建了一個Spring控制器方法，該方法接受一個帶有「widget」屬性的String，並返回一個字符串，該div是一個div，數據dojo類型設置爲widget名稱，這是一種編程方式，定義要加載的聲明標記以編程方式...它只是越來越we！！所以現在我所有的內容窗格如下所示：

<div data-dojo-type="dijit/layout/ContentPane" title="<b>Registries</b>" data-dojo-props='href:"rest/dynamicWidgetHtml/my.custom.Widget/"'></div> 

其中「my.custom.Widget」是一個彈簧控制器路徑變量。

任何方法來簡化這一點，並消除調用服務器來構建div的需要，以便選擇選項卡時可以動態加載小部件？

Answer 1

想知道您對JavaScript和Dojo小部件的熟悉程度如何？

我試圖用一些假設來回答問題。
1）假設data-dojo-type =「my/custom/Widget」是一個自定義的dojo小部件，例如包含在JavaScript文件中的dojo小部件。
2）您可以將一個函數附加到ContentPane的onShow事件，如下所示。

首先，您需要在contentPane「onShow」事件中附加一個函數。說myFirstTabContentPaneShowAction（） 並指定一個具有唯一ID的元素標記。我已經在下面使用了widget1。當您選擇選項卡時，onShow事件將被觸發。

<div dojoType="dijit.layout.ContentPane" onShow="myFirstTabContentPaneShowAction()"> 
    <div id="widget1" ></div> 
</div> 

myFirstTabContentPaneShowAction（）將如下所示。

function myFirstTabContentPaneShowAction() { 

require ( ["dojo/parser", "dojo/dom", "my/custom/Widget"] , function (parser, dom) { 

    widgetHandle = parser.instantiate([dom.byId("widget1")], {data-dojo-type: "my.custom.Widget"}); 

}); 

希望它有幫助。