Question

我不清楚如何在dojo中包含用于创建内容窗格的布局模块。我想在我的一个小部件中布局一些内容。

在dojo tookit example中，他们需要这些模块

require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);

但是我想要包含它的小部件就像这样

 define([
    "dojo/_base/declare",
    "dojo/parser",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./home/templates/HomePage.html",
    "xstyle/css!./home/css/HomePage.css",
    "dijit/layout/LayoutContainer",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane"
], function (
    declare,
    parser,
    _WidgetBase,
    _TemplatedMixin,
     _WidgetsInTemplateMixin,
    template,
    css,
    lc,
    bc,
    cp
) {

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: template,

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

        },

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

        }
    });
});

小部件HTML就像这样

<div style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">Leading pane</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Center pane</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
    </div>

 </div>

但它不起作用，即使我包含了这些依赖项

"dijit/layout/LayoutContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"

在我的自定义模板小部件中放置所需模块以使用布局小部件的位置？或者我错过了其他什么？

编辑：我可以通过将需求置于定义

之上来使其工作

require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);
require(["dojo/parser", "dojo/ready"], function (parser, ready) {
    ready(function () {
        parser.parse();
    });
});
define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./home/templates/HomePage.html",
    "xstyle/css!./home/css/HomePage.css",
    "./home/HomeNavigationWidget"
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin,
     _WidgetsInTemplateMixin,
    template,
    css,
    HomeNavigationWidget

) {

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: template

    });
});

编辑：我发现布局之后工作的原因是_WidgetsInTemplateMixin。添加此项允许在模板内使用布局小部件。我删除了定义上面的两个require语句，它工作正常。在dojoConfig中，parseOnLoad设置为false。

Answer 1

在您的示例中，您似乎尝试将布局窗格添加到自定义窗口小部件的模板（Editor.html）。

如果是这种情况，那么您可以只需要小部件文件中的模块：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojomat/_AppAware",
    "../_global/widget/NavigationWidget",
    "dojo/text!./templates/Editor.html",
    "dojo/text!./css/Editor.css",
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane"
], function (
     declare,
     _WidgetBase,
     _TemplatedMixin,
     _AppAware,
     NavigationWidget,
     template,
     css
) {
    return declare([_WidgetBase, _TemplatedMixin, _AppAware], {
       // widget code
    });
});

注意你不必在传递给define的函数中将它们声明为参数，因为它们没有在代码中使用 - 它们只是在依赖项数组中列出所以你会确定它们在生成模板时加载。

另外，请注意不再需要dojo/parse模块 - 这是因为在示例中，使用dojo配置选项（{{1}）自动在index.html页面中解析代码}）。但是，在您的代码中，我希望您已经有办法解析在应用程序主入口点中定义的代码。

如何将dijit布局窗格添加到自定义模板化窗口小部件？ - （Dojo 1.10）

1 个答案: