0

在我使用 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!";
}]);

希望这能澄清一点。

4

1 回答 1

2

您粘贴的 HTML 在拉入 Dojo 时会指定“parseOnLoad: false”。除非您显式调用 parser.parse()，否则 Dojo 将无法实际解析您的任何 data-dojo-type。如果将其更改为“parseOnLoad：true”，这有帮助吗？（这不再是推荐的方法，但尝试仍然有用。）

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

但是了解“不起作用”的实际含义肯定会有所帮助：您是否收到错误，没有内容出现？


后来补充回答：

  1. 确保您从 Web 服务器运行文件，而不是本地文件，否则 XHR 请求将失败
  2. 摆脱你的 dojoConfig 对象：它没有帮助
  3. 您的单独文件看起来很狡猾：您正在进行一些奇怪的数组包围
  4. 您顶部 div 上的 data-dojo-props 有点损坏。写“排水沟：'假'”，而不是“排水沟：=假”

将此添加到您的 HTML 中。它将加载正确的模块并手动启动解析器。

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

这将使您的菜单项显示，尽管在您添加 onClick 处理程序函数之前它不会完全工作。

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

于 2012-05-02T10:51:44.413 回答