Dojo移動EdgeToEdgeList教程不顯示

我想學習Dojo 1.9，以前使用過1.4.x.一直在看一些教程，並嘗試了一些dojox/mobile/EdgeToEdgeList的例子。我似乎沒有得到它。Dojo移動EdgeToEdgeList教程不顯示

複製了來自http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/EdgeToEdgeList.html的示例代碼後，它們使用CDN託管的dojo工具包進行聲明式（CSS sprite示例）。然而沒有任何東西顯示，除了默認的HTML無序列表和3個項目符號，使用dojo移動樣式。 Chrome和FF 22.0瀏覽器的行爲都一樣。我看到沒有網絡或控制檯錯誤，它似乎沒有加載。我懷疑我在某處丟失了某些東西。我需要指定某處的onLoad屬性嗎？

這裏是我的榜樣HTML：

<html> 

    <head> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
    <title> 
     MyTitle 
    </title> 
    <meta content="" name="description" /> 
    <meta content="" name="keywords" /> 
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]--> 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/mobile/deviceTheme.js"></script> 
    </head> 
    <body> 
    <header> 
     <h1> 
     My Title 
     </h1> 
     <nav> 
     <ul> 
      <li> 
      <a href="/">Home</a> 
      </li> 
     </ul> 
     </nav> 
    </header> 
     <!-- load Dojo --> 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" 
       data-dojo-config="async: true"></script> 
    <script> 
     require([ 
    "dojox/mobile", 
    "dojox/mobile/parser" 
]); 
    </script> 

    <ul data-dojo-type="dojox/mobile/EdgeToEdgeList" 
    data-dojo-props='iconBase:"all-icons.png"'> 
    <li data-dojo-type="dojox/mobile/ListItem" 
     data-dojo-props='iconPos:"0,0,29,29"'>Airplane Mode 
     <div class="mblItemSwitch" data-dojo-type="dojox/mobile/Switch"></div></li> 
    <li data-dojo-type="dojox/mobile/ListItem" 
     data-dojo-props='iconPos:"0,29,29,29", 
         rightText:"mac", 
         href:"test_IconContainer.html"'>Wi-Fi</li> 
    <li data-dojo-type="dojox/mobile/ListItem" 
     data-dojo-props='iconPos:"0,58,29,29", 
         rightText:"AcmePhone", 
         moveTo:"general"'>Carrier</li> 
</ul> 
    </body> 
</html>

來源

2013-07-05 ammianus

的EdgeToEdgeList渲染當我添加parseOnLoad：真正到數據道場-config屬性加載道場從CDN

例如

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" 
      data-dojo-config="async: true, parseOnLoad: true"></script>

編輯：研究後更完整的答案。原始問題中的代碼不起作用的原因是我對我的EdgeToEdgeList小部件使用了聲明式樣式，根據Dojo 1.9 documentation中的解釋，在使用聲明式方法時需要解析DOM。然而，雖然parseOnLoad：true在我的情況下工作，但這不是最佳實踐。

現在，我們需要做的就是調用dojo/parser。在AMD在Dojo 1.7中採用之前，您可以安全地使用一個Dojo配置選項 parseOnLoad：true。但現在有一些邊緣情況，如果您使用它，可能會遇到意外的結果，因此建議您在代碼中謹慎地調用解析器，現在推薦使用。所以運行解析器，你會想要做這樣的事情：

<script type="text/javascript" src="lib/dojo/dojo.js" 
    data-dojo-config="async: true"></script> 
<script type="text/javascript"> 
    require(["dojo/parser", "dojo/ready", "dijit/form/Button"], 
    function(parser, ready){ 
     ready(function(){ 
      parser.parse(); 
     }); 
    }); 
</script>

使用新的方法，正是因爲他們有它的工作原理。它引發了一個問題，爲什麼他們的教程代碼沒有說明這一點，但無論如何，這是我原來的問題的答案。

來源

2013-07-05 13:24:10 ammianus

Dojo移動EdgeToEdgeList教程不顯示

回答

相關問題