网站不显示将 Dojo 从 1.5 升级到 1.7 的 Dojo 主题或小部件

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

希望这能澄清一点。

您粘贴的 HTML 在拉入 Dojo 时指定了 'parseOnLoad： false'。这将阻止 Dojo 实际解析任何数据 dojo 类型，除非您显式调用 parser.parse((。如果将其更改为"parseOnLoad： true"，是否有帮助？ (这不再是推荐的方法，但尝试一下仍然很有用。

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

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

后来补充回答：

确保从 Web 服务器而不是本地文件运行文件，否则 XHR 请求将失败
摆脱你的 dojoConfig 对象：它没有帮助
您的单独文件看起来很狡猾：您正在进行一些奇怪的数组括号
顶部div 上的数据道场道具有点坏了。写"排水沟：'假'"，而不是"排水沟：=假">

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

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

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

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

相关内容

最新更新

热门标签：