如何将 dijit 布局窗格添加到自定义模板小部件？ - (道场 1.10)

Question

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

在 dojo takeit 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 放在定义上方，我能够使用此代码使其工作

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 模块 - 这是因为在示例中，代码在 index.html 页面中使用 dojo 配置选项 (parseOnLoad) 自动解析。但是，在您的代码中，我希望您已经有办法解析在应用程序的主入口点中定义的代码。