Question

我在TabContainer中有一个包含6个自定义小部件的JSP页面。代码看起来像这样：

<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控制器方法，该方法接受带有＆＃34;小部件的字符串＆＃34;属性并返回一个字符串，该字符串是一个div，其中data-dojo-type设置为小部件名称，这是一种以编程方式定义要以编程方式加载的声明性标记...它只是不断变得更奇怪！所以现在我的所有内容窗格都是这样的：

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

where＆＃34; my.custom.Widget＆＃34;是一个弹簧控制器路径变量。

是否有任何方法可以简化此操作并消除调用服务器构建div的需要，以便在选择选项卡时动态加载窗口小部件？

Answer 1

想知道你对JavaScript和Dojo小部件有多熟悉。？

我试图用一些假设回答这些问题 1）假设data-dojo-type =＆＃34; my / custom / Widget＆＃34;是一个自定义的dojo小部件，即包含在javascript文件中的dojo小部件 2）您可以将功能附加到ContentPane的onShow事件，如下所示。

首先，您需要将一个函数附加到contentPane＆＃34; onShow＆＃34;事件。说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"});

});

希望它有所帮助。

在Dojo ContentPanes中动态加载小部件

1 个答案: