Question

我有一个带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>

和自定义小部件如下＆＃34; Canvas.js＆＃34;

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

    });

});

使用时尝试使用Canvas和new 它会抛出如下错误。

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

错误为

＆＃34;尝试使用id == mainPanel注册小部件，但该ID已经注册＆＃34;

Answer 1

永远不要在小部件模板中使用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没有正式支持布局小部件，因此在使用它们时要小心。但是，这不是您问题的原因。

Answer 2

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

parseOnLoad应为false

Dojo：Custom小部件中的布局小部件

2 个答案: