Dojo : 自定义小部件内的布局小部件答案

【问题标题】：Dojo : Layout widgets inside the Custom widgetDojo : 自定义小部件内的布局小部件
【发布时间】：2014-09-03 23:54:39
【问题描述】：

我有一个带有 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 已注册”

【问题讨论】：

当您尝试注册一个小部件（在本例中为 BorderContainer ）两次时会发生此错误，而它仍然是第一个实例，我该怎么说，活着。您是否检查过您的小部件是否没有构建双倍？
这是测试代码..所以它没有初始化两次..根据文档我们不能将布局小部件放在模板中..
我看不出为什么不应该在模板中使用布局小部件的原因，恰恰相反。只需确保您没有两次初始化小部件（可能来自标记？）并按照下面的答案小心这些 ID。
来自 api 文档 [link] dojotoolkit.org/reference-guide/1.9/dijit/… dijit._WidgetsInTemplateMixin mixin 不支持将布局小部件添加为子小部件。特别是对孩子的 startup() 和 resize() 调用存在问题。

标签： javascript dojo widget

【解决方案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 不正式支持布局小部件，因此在使用它们时要小心。但是，这不是您的问题的原因。

【讨论】：

【解决方案2】：

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

parseOnLoad 应该是假的

【讨论】：

这不是您的问题的原因。你得到的错误是因为，就像@MiBrock 和我说的那样，由于 ID，它在初始化小部件时遇到了问题。正如您在这个小提琴中看到的那样：jsfiddle.net/TX3q3，您可以在某些情况下使用布局小部件，但不受官方支持。
是的，你是对的..当我使用小部件
它很好......问题在于程序化方式初始化它
当我做了 parseOnLoad: false，在 dojoConfig 中它很好..我认为这是问题
我提供的小提琴链接使用parseOnLoad: true 并且工作正常。这也不是问题……我已经告诉过你问题所在：不要在你的小部件中使用 ID。
你没有 parser.parse() 吗？使用 parseOnLoad 和 .parse() 你会遇到你描述的问题