在 Dojo ContentPanes 中动态加载小部件

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 控制器方法，它接受带有“widget”属性的字符串并返回一个字符串，该字符串是一个 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>

其中“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"});

});

希望对你有帮助。