Question

在我使用dojo 1.5实现一个小型Web界面并且仅引用本地文件夹（dojo，dijit，dojox）的路径并使用dojo.require加载我想要的模块之前，它完美地工作。现在我升级到1.7，突然间它甚至在使用url引用时也不起作用。我正在引用其中一个演示项目 http://download.dojotoolkit.org/release-1.7.1/dojo-release-1.7.1/dijit/themes/themeTester.html 并希望通过一些更改重新创建页面。我把它分解成最简单的形式，只有主菜单，它不会出现这种情况，而只是作为文本术语而已。

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Theme Previewer</title>


<script type="text/javascript" dojoConfig="parseOnLoad:false, 
      async:true"  
     src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" > </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="Styles/demo.css"/>


     <script type="text/javascript">
    var dojoConfig = {
        baseUrl: "//ajax.googleapis.com/ajax/libs",
        tlmSiblingOfDojo: false,
        packages: [
        { name: "dojo", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" },
        { name: "dijit", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" },
        { name: "dojox", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" }
        ]
    };
</script>
  <!--script type="text/javascript" src="Scripts/src.js"></script-->

  </head>
  <body class="claro">
<div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:=false">

    <div id="header" data-dojo-type="dijit.MenuBar" data-dojo-props="region:'top'">
        <div data-dojo-type="dijit.PopupMenuBarItem" id="edit">
            <span>Edit</span>
            <div data-dojo-type="dijit.Menu" id="editMenu">
                <div data-dojo-type="dijit.MenuItem" id="cut" data-dojo-props="
                    iconClass:'dijitIconCut'
                ">Cut</div>
                <div data-dojo-type="dijit.MenuItem" id="copy" data-dojo-props="
                    iconClass:'dijitIconCopy'
                ">Copy</div>
                <div data-dojo-type="dijit.MenuItem" id="paste" data-dojo-props="iconClass:'dijitIconPaste'">Paste</div>
                <div data-dojo-type="dijit.MenuSeparator" id="separator"></div>
                <div data-dojo-type="dijit.MenuItem" id="undo" data-dojo-props="iconClass:'dijitIconUndo'">Undo</div>
            </div>
        </div>
        <div data-dojo-type="dijit.PopupMenuBarItem" id="view">
            <span>View</span>
            <div data-dojo-type="dijit.Menu" id="viewMenu">
                <div data-dojo-type="dijit.MenuItem">Normal</div>
                <div data-dojo-type="dijit.MenuItem">Outline</div>
                <div data-dojo-type="dijit.PopupMenuItem">
                    <span>Zoom</span>
                    <div data-dojo-type="dijit.Menu" id="zoomMenu">
                        <div data-dojo-type="dijit.MenuItem">50%</div>
                        <div data-dojo-type="dijit.MenuItem">75%</div>
                        <div data-dojo-type="dijit.MenuItem">100%</div>
                        <div data-dojo-type="dijit.MenuItem">150%</div>
                        <div data-dojo-type="dijit.MenuItem">200%</div>
                    </div>
                </div>
            </div>
        </div>
        <div data-dojo-type="dijit.PopupMenuBarItem" id="themes">
            <span>Themes</span>
            <div data-dojo-type="dijit.Menu" id="themeMenu"></div>
        </div>
        <div data-dojo-type="dijit.PopupMenuBarItem" id="dialogs">
            <span>Dialogs</span>
            <div data-dojo-type="dijit.Menu" id="dialogMenu">
                <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick: showDialog">slow loading</div>
                <div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div>
            </div>
        </div>
        <div data-dojo-type="dijit.PopupMenuBarItem" id="inputPadding">
            <span>TextBox Padding</span>
            <div data-dojo-type="dijit.Menu" id="inputPaddingMenu">
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding, checked:true">theme default</div>
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">0px</div>
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">1px</div>
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">2px</div>
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">3px</div>
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">4px</div>
                <div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">5px</div>
            </div>
        </div>
        <div data-dojo-type="dijit.PopupMenuBarItem" id="help">
            <span>Help</span>
            <div data-dojo-type="dijit.Menu" id="helpMenu">
                <div data-dojo-type="dijit.MenuItem">Help Topics</div>
                <div data-dojo-type="dijit.MenuItem">About Dijit</div>
            </div>
        </div>
        <div data-dojo-type="dijit.PopupMenuBarItem" data-dojo-props="disabled:true">
            <span>Disabled</span>
            <div data-dojo-type="dijit.Menu">
                <div data-dojo-type="dijit.MenuItem">You should not see this</div>
            </div>
        </div>
    </div>

    </div>

我有一个单独的文件引用要包含的项目：

define([
"dojo/_base/array",
"dojo_base/config",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/_base/kernel",
"dojo/query",
"dojo/ready",
"dojo/_base/window",
"dojo/_base/fx",
"dijit/registry",
"dijit/MenuItem",
"dojo/date/locale",
"dojo/parser",
"dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel",
"dojo/number", //// dojo/number/format
"dojo/dnd/Source",// // dojo/dnd/Source
"dojo/_base/json", //// dojo/toJson
  "dojox/grid/DataGrid",
    "dojo/data/ItemFileReadStore",
    "dojo/parser",
    "dijit/form/DateTextBox",
    "dojox/widget/AnalogGauge",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dijit/layout/BorderContainer",
    "dijit/layout/AccordionContainer",
    "dijit/form/Button",
    "dojox/widget/AnalogGauge",
    "dojox/widget/gauge/AnalogArcIndicator",
    "dojox/widget/gauge/AnalogNeedleIndicator",
    "dojox/widget/gauge/AnalogArrowIndicator",
    "dijit/MenuBar",
    "dijit/PopupMenuBarItem",
    "dijit/Menu",
    "dijit/MenuItem",
    "dijit/Tree",
    "dijit/MenuSeparator",
    "dijit/Calendar",
    "dijit/ColorPalette",
"dijit/dijit-all" // dijit.*
["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
}]);

希望这有点澄清。

Answer 1

你粘贴的HTML指定'parseOnLoad：false'，当它拉入Dojo时。这将阻止Dojo实际解析任何data-dojo类型，除非你显式调用parser.parse（）。如果将其更改为'parseOnLoad：true'，这有帮助吗？（这不再是推荐的方法，但尝试它仍然有用。）

你似乎在HTML中混合了Dojo 1.7.2和1.7.1引用，这有点奇怪。你需要那个dojoConfig吗？ Dojo应该能够找到dijit + dojox作为dojo目录的兄弟姐妹，即使在CDN上也是如此。

但这肯定有助于了解“不起作用”实际意味着什么：你是否会出现错误，没有内容出现？

后来补充回答：

确保您从Web服务器运行文件，而不是本地文件，否则XHR请求将失败
摆脱你的dojoConfig对象：它没有帮助
你的单独文件看起来很狡猾：你有一些奇怪的阵列包围
你的顶级div上的数据-dojo-props有点破碎。写“gutters：'false'”，而不是“gutters：= false”

在HTML中添加此内容。它将加载正确的模块并手动关闭解析器。

<script>
require(["dojo/parser", "dijit/dijit-all", "dojo/domReady!"], function(parser) {
  parser.parse();
});
</script>

这将显示您的菜单项，但在添加onClick处理函数之前它将无法完成。

最后，请确保在浏览器控制台中查看错误和警告：这将提供大量输出，以帮助人们诊断未来的问题。如果您在加载模块时遇到问题，请尝试关闭异步，因为异步有时会使诊断变得更难。

网站没有显示dojo主题或小部件将Dojo从1.5升级到1.7？

1 个答案: