Question

我无法在道场的官方文档下列出道场示例。当我从他们的网页上运行Dojo的演示时，它运行正常。但是当我复制并粘贴代码（如下所示）并尝试在网络浏览器中运行时，我收到错误。对于多个不同的Web浏览器，我在控制台日志中收到错误消息：

错误：尝试使用id == borderContainerThree注册小部件但是 id已经注册

这令人沮丧，因为我无法弄清楚导致我的代码失败的差异，但是他们的代码可以运行。我已经从网页上逐字复制了他们的代码。

示例在页面上给出： http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html 标题为：＆＃34;在Dijit模板内的BorderContainer＆＃34;

这里有一个类似的问题（dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered）和这里（Dojo - "Tried to register widget with id==centerPane but that id is already registered"）说这可能是因为我调用了parser.parse两次，但如果我取消注释parser.parse行，错误消失，但网页上没有显示任何内容。

我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>dijit/layout/BorderContainer &mdash; The Dojo Toolkit - Reference Guide</title>

    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
    <script type="text/javascript">
        dojoConfig = {
            async: true
        };
    </script>
    <script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
    <script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>

</head>
<body class="claro" >
My Test


<script type="text/javascript">
    require([
        "dojo/parser",
        "dojo/_base/declare",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin",
        "dijit/form/Button",
        "dijit/layout/ContentPane",
        "dijit/layout/BorderContainer",
        "dijit/layout/TabContainer",
        "dijit/layout/AccordionContainer",
        "dijit/layout/AccordionPane"
    ], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
        declare("MyDijit",
                [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
                    // Note: string would come from dojo/text! plugin in a 'proper' dijit
                    templateString: '<div style="width: 100%; height: 100%;">' +
                            '<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
                            '  style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
                            '<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
                            '<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
                            ' <div data-dojo-type="dijit/form/Button">A Button</div>' +
                            '</div>' +
                            '</div></div>'
                });

        parser.parse();
    });
</script>

<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
            <script type="dojo/on" data-dojo-event="click">
                require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
                    // Create a new instance
                    var newdijit = new MyDijit({}, domConstruct.create('div'));
                    newdijit.placeAt(dom.byId('mydijitDestination'));
                    newdijit.startup();
                });
            </script>
        </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
        OUTER LEFT<br />
        This is my content.<br />
        There is much like it,<br />
        but this is mine.<br />
        My content is my best friend.<br />
        It is my life.<br />
        I must master it,<br />
        as I must master my life.
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
        <div id="mydijitDestination" style="width: 100%; height: 100%"></div>
    </div>
</div>


</body>
</html>

对于我做错的任何建议都将不胜感激。

Answer 1

错误确实表明您正在尝试创建具有相同ID两次的窗口小部件，这是因为您有两个具有相同ID的元素，或者因为您正在解析相同的标记两次。

我建议您对parser.parse()行进行评论，然后将parseOnLoad: true添加到dojoConfig，例如：

<script type="text/javascript">
    dojoConfig = {
        async: true,
        parseOnLoad: true
    };
</script>

在评论解析线时，您没有看到任何东西的原因是另一个问题。 Dojo中的大多数布局小部件都根据父DOM节点的空间生成其布局。这意味着您必须首先使用CSS设置窗口小部件的空间，例如：

#borderContainerThree {
    width: 100%;
    height: 100%;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow:hidden;
}

如果你这样做，那么一切都应该正常，就像这个小提琴一样：http://jsfiddle.net/92NT4/

文档中的Dojo示例失败，其中＆＃34; id已经注册＆＃34;错误

1 个答案: