Dojo Toolkit 在运行时创建动态小部件答案

【问题标题】：Dojo Toolkit create dynamic widget at runtimeDojo Toolkit 在运行时创建动态小部件
【发布时间】：2015-08-04 08:35:40
【问题描述】：

我对 Dojo 和 1.10 版还很陌生。我正在寻找一种在运行时根据从服务器请求的数据创建小部件的解决方案。

应用程序有一棵树。如果单击树中的一个项目，则应创建一个新选项卡，并应执行一个脚本以从服务器获取数据并创建小部件。（在大多数情况下，它是一个表单，来自服务器的数据描述了输入的类型）。脚本的位置存储在树节点中。

目前在我的应用程序中，我可以单击树节点 -> 创建内容窗格并将其添加为选项卡。在内容窗格中，href-attribute 设置为静态 .html-site，如下所示：

dynWidget.html?scriptlocation=abc

在 .html 文件中，我尝试通过 location 属性从 URL 读取参数。当然，这不起作用，因为 location 属性包含完整站点的 URL，而不是附加在内容窗格中的 URL。

是否有可能从内容窗格中获取 href 属性？这个问题有完全不同的解决方案吗？

任何帮助表示赞赏！非常感谢！

【问题讨论】：

标签： javascript dojo widget

【解决方案1】：

您的问题可以更详细，但也许您需要：

var node = dojo.byId("contentpane");
var value = domAttr.get(node, "href-attribute");

【讨论】：

谢谢！但是我觉得有问题，因为contentpane的ID取决于我点击的树中的节点。在我的静态 html 页面中，我不知道要询问哪个 ID，是吗？如果有可以帮助您的详细信息，请询问。
树的所有节点都使用同一个html文件！所以我必须获取信息，加载哪个脚本，到 html 文件。
您最好的选择是创建一个 JSFiddle 并在您的问题中引用它。您的“静态”HTML 页面仍然可以使用使用 Javascript 的代码来确定要请求的 ID...

【解决方案2】：

在专用存储中保存有关树项的数据
使用Object Pool Pattern 保存打开的标签列表

使用require 和Widget.addChild()

// Custom name for click event handler. Replace to own.
onItemClick: function(item) {
    // Getting data from store. Any item have full path to widget.
    var dataItem = store.get(item.id),
        requirePath = dataItem.requirePath; // Full path to widget

    // Load widget via require function
    require([ requirePath ], function(LoadedWidget){
        var newTab = new ContentPane({}),
            newWidget = new LoadedWidget({});

        // Append tab in the global tabs store
        desktop.tabs.add(newTab);

        // Place new widget to tab
        newTab.addChild(newWidget);

        // Run new widget:
        newWidget.startup();
    });
}

还有在运行时创建小部件的示例：

define([
    "dojo/dom-construct",
    "dojo/_base/declare",
    "dijit/_WidgetBase"
], function(
    domConstruct,
    declare,
    _WidgetBase
){
    return declare(
        "My.Widget.Name", 
        _WidgetBase,
        {
            buildRendering: function(){
                this.inherited(arguments); // Call parent method
                this.domNode = domConstruct.create("div", {
                    // Detail properties of DOM element
                });
                this._button = domConstruct.create("button", {
                    label: "OKAY"
                });
            },

            _okBtnHandler: function(event) {
                // Handler for click by OKAY button

                console.log(this); // Instance of widget, not button DOM node
            },

            startup: function(){
                this.inherited(arguments);

                // Connect handlers to widget dom elements
                // Also, "this" for handler now is My.Widget.Name instance, not DOM Button element
                this.connect(this._button, "onClick", "_okBtnHandler"); 
            }
        }
 );
});

【讨论】：