将dojo小部件添加到自定义小部件内部

Question

将dojo小部件添加到自定义小部件内部

javascriptdojo

3

我正在制作一个小的道场(widget)，基本上是扩展对话框(widget)，并想添加简单的小部件，如文本输入和几个标签等。我该怎么做？我正在按照教程进行操作， Dojo如何制作小部件请帮忙。

谢谢

- Aadi Droid

2个回答

3

如果我理解正确，你是在询问如何在自定义小部件中包含其他小部件。如果是这样的话，我们需要稍微修改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('')获取引用。

希望这可以帮助您。

- belzebu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- OammieR · Accepted Answer

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

这是我的小部件的路径。

输入图像描述

这里是必须声明的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中(模板路径)

<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>