Dojo:在自定义小部件中布局小部件

Dojo : Layout widgets inside the Custom widget

本文关键字：小部 布局 自定义 Dojo      更新时间：2023-09-26

我有一个带有dojo布局小部件的自定义dojo小部件

模板如下

<div>
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" id="mainPanel" style="padding: 0px">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false"  style="padding: 0px">
            Saartha Labs Pvt Ltd
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', gutters: false, splitter:false"  style="padding: 0px" >
            <div id="toolBar"></div>
        </div>
        <div id="map-div"  data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false"></div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:false" style="display: none" ></div>
    </div>
</div>

和下面的自定义小工具"Canvas.js">

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dojo/text!./canvas.html",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane"
], function (declare, _WidgetBase,_WidgetsInTemplateMixin, _OnDijitClickMixin,_TemplatedMixin, template) {
    return declare([_WidgetBase,_OnDijitClickMixin, _TemplatedMixin,_WidgetsInTemplateMixin], {
        templateString: template
        //  your custom code goes here
    });
});

使用时，尝试将画布与新它抛出如下错误。

require([
        "bhuvi/canvas/Canvas",
        "dojo/domReady!"],
            function(Canvas){
                var canvas = new Canvas();
                canvas.placeAt(window.document.body);
            });

错误为

"尝试使用id=mainPanel注册小部件，但该id已注册">

永远不要在小部件模板中使用ID。ID必须是唯一的，所以除非你的ID是动态生成的(在这种情况下不是(，否则如果你创建了多个小部件实例，你的ID就不会是唯一的。

相反，使用data-dojo-attach-point机制，例如：

<div>
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false"
        data-dojo-attach-point="mainPanel" style="padding: 0px">
        <!-- Rest of the code -->
    </div>
</div>

现在，如果需要访问该小部件，可以使用this.mainPanel。

即使您没有创建小部件的多个实例，使用连接点也会更好，因为您永远不知道屏幕后面会发生什么。

需要注意的是：布局小部件不受dijit/_WidgetsInTemplateMixin mixin的官方支持，所以在使用它们时要小心。然而，这并不是你问题的原因。

var dojoConfig = {
            async: true,
            parseOnLoad: false
}

parseOnLoad应为false

相关文章：