javascript - 在 Dojo ContentPanes 中动态加载小部件

Question

我有一个 JSP 页面，其中 TabContainer 中有 6 个自定义小部件。代码看起来像这样:

<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 Controller 方法，它接受带有“widget”属性的字符串，并返回一个 div 字符串，其中 data-dojo-type 设置为小部件名称，这是定义要加载的声明性标记的编程方式以编程方式......它只是变得越来越奇怪!所以现在我的所有内容 Pane 如下所示:

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

其中“my.custom.Widget”是 Spring Controller 路径变量。

有什么方法可以简化这个过程并消除调用服务器来构建 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"});

});

希望有帮助。