在自定义小部件中添加 dojo 小部件答案

【问题标题】：Adding dojo widget inside custom widget在自定义小部件中添加 dojo 小部件
【发布时间】：2012-03-07 13:53:45
【问题描述】：

我正在制作一个小的 dojo 小部件，主要是扩展 dailog 小部件，并希望添加简单的小部件，如文本输入、一些标签等。我该怎么做？我正在学习教程，

Dojo how to make a widget

请帮帮我。

谢谢

【问题讨论】：

标签： javascript dojo

【解决方案1】：

首先。我英语不好，但会尽力而为。

这是我的小部件的路径。

在这里。 js文件中必须声明的重要代码。

dojo.provide("gissoft.dijit.widgetOam"); 

dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("gissoft.dijit.widgetOam", [dijit._Widget, dijit._Templated], {
    widgetsInTemplate: true,
    basePath: dojo.moduleUrl("gissoft.dijit"),
    templatePath: dojo.moduleUrl("gissoft.dijit", "templates/widgetOam.html"),

    constructor: function () {

    },

    postMixInProperties: function () { 

    },

    postCreate: function () {

    },

    startup: function () {

    }

});

并在文件 widgetOam.html(templatePath)

<div> <!-- do not add tag <html> , <head> , <body> but must have <div> first -->
    Hello World.
</div>

这是从我的 Default.aspx 调用小部件的方法

您必须在调用 dojo 库之前添加它

<script>
   djConfig = {
       parseOnLoad: true,
       baseUrl: './',
       modulePaths: { 'gissoft.dijit': 'js/gissoft/dijit' }
   };
</script>

在体内

<body class="tundra">
    <form id="form1" runat="server">
    <div>
        <div data-dojo-type="gissoft.dijit.widgetOam"></div>
    </div>
    </form>
</body>

【讨论】：

如果我想在运行时将一个自定义小部件添加到另一个自定义小部件中怎么办？例如我做了declare("_MyCustomWidgetContainer", ...)，在它的this.domNode 中有一个ul，我有一个declare("_MyCustomWidgetItem", ...)（分解为一个li），我想在那个ul 中插入？
Mr.@NeelBasu，如果我没有错过重点。你问我可以将一个自定义小部件添加到另一个自定义小部件中吗？答案是可以的。并查看 domNode 工作的小示例here

【解决方案2】：

如果我理解正确，您是在询问如何在自定义小部件中包含其他小部件。如果是这种情况，那么我们必须稍微修改 OammieR 的答案，因为它对您的问题并不完整。要在您的自定义小部件中包含其他小部件，您应该将它们包含在您的小部件声明中：

dojo.provide("gissoft.dijit.widgetOam"); 

dojo.require("dijit.form.Button"); //<- this the standard widget you want to have in your widget
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("gissoft.dijit.widgetOam", [dijit._Widget, dijit._Templated], {
    widgetsInTemplate: true,
    basePath: dojo.moduleUrl("gissoft.dijit"),
    templatePath: dojo.moduleUrl("gissoft.dijit", "templates/widgetOam.html"),

特别重要的是“widgetsInTemplate: true”部分，它告诉解析器期待小部件内部的小部件。

然后，您只需将您希望包含在小部件模板中的特定小部件的 HTML 标记包含在内。

<div> <!-- do not add tag <html> , <head> , <body> but must have <div> first -->
    <button data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="_innerWidget" data-dojo-attach-event="ondijitclick:_onClick">Yo!</button>
</div>

dojoAttachPoint 很有用，因此您可以在小部件的实现中直接获得对该小部件的引用，而无需通过 dijit.byId('') 获得引用。

希望这会有所帮助。

【讨论】：