2012-05-01 33 views
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 之一,並希望通過一些更改重新創建該頁面。我把它分解成最簡單的形式,只有主菜單,它不是以這種方式出現,而只是單純的文本術語。網站不顯示道場主題或小部件升級道場從1.5到1.7?

<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!"; 
}]); 

希望這闡明這一點。

+0

請寫出有用的標題並選擇有意義的標籤。此外,請確定「不起作用」的含義。 – 2012-05-01 21:15:33

回答

2

您粘貼的HTML在將Dojo拉入時指定'parseOnLoad:false'。這將阻止Dojo實際解析您的任何數據dojo類型,除非您顯式調用parser.parse()。如果您將其更改爲'parseOnLoad:true',這有幫助嗎? (這不再是推薦的方法,但它仍然是有用的嘗試。)

您似乎也有混合的Dojo 1.7.2和1.7.1 HTML中的引用,這是一個小的奇。你需要dojoConfig嗎? Dojo應該能夠在dojo目錄中找到dijit + dojox,即使在CDN上也是如此。

但它肯定有助於瞭解什麼「不起作用」實際上意味着:您是否收到錯誤,沒有內容出現?


後來補充回答:

  1. 確保你從Web服務器上運行的文件,而不是本地文件,否則XHR請求將失敗
  2. 擺脫你dojoConfig對象:這不是幫助
  3. 你的單獨的文件看起來不順眼:你有一些奇怪的數組包圍進行
  4. 你的頂級div上的數據dojo的道具有點破。寫「水槽:'假'」,而不是「水槽:=假」

將此項添加到您的HTML。它會加載正確的模塊並手動啓動解析器。

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

這會讓你的菜單項顯示,儘管它不會完全工作,直到你添加你的onClick處理函數。

最後,請確保您在瀏覽器控制檯中查看錯誤和警告:這將提供大量的輸出,以幫助人們診斷未來的問題。如果您在加載模塊時遇到問題,請嘗試關閉異步,因爲異步有時會使診斷更困難。

+0

我改變它爲真,並沒有幫助,並完全刪除它,仍然沒有。請注意,如果我使用1.5版本,那麼它可以工作。請注意上面的編輯,並感謝您的回覆。是隻是我還是dojo論壇根本沒有幫助 – vbNewbie

+0

我編輯了答案,解釋了一些你需要做的事情來實現它。這些更改應該會顯示菜單項。 (對我來說!) –