Dojo移动EdgeToEdgeList教程不显示答案

【问题标题】：Dojo mobile EdgeToEdgeList tutorial not displayingDojo移动EdgeToEdgeList教程不显示
【发布时间】：2013-07-03 14:12:05
【问题描述】：

我正在尝试学习 Dojo 1.9，之前使用过 1.4.x。一直在看一些教程，并尝试了一些 dojox/mobile/EdgeToEdgeList 的示例。我只是好像没听懂。

已经从http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/EdgeToEdgeList.html 复制了示例代码，他们使用 CDN 托管的 dojo 工具包进行了声明（CSS sprite 示例）。然而，除了带有 3 个项目符号的默认 HTML 无序列表，没有显示任何内容，样式为 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>

【问题讨论】：

标签： javascript mobile dojo widget

【解决方案1】：

EdgeToEdgeList 在我将 parseOnLoad: true 添加到 data-dojo-config 属性以从 CDN 加载 dojo 时呈现

例如

<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。收养前您可以安全地使用 Dojo 1.7 中的 AMD 的 Dojo 配置选项解析加载：是的。不过，现在有一些边缘情况，你如果你使用它可能会遇到意想不到的结果，因此现在是建议在您的代码中谨慎地调用解析器。所以要运行解析器，你会想做这样的事情：

<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>

完全按照他们的方式使用新方法。它引出了一个问题，为什么他们的教程代码没有说明这一点，但无论如何，这是我最初问题的答案。

【讨论】：