0

我正在尝试学习 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>
4

1 回答 1

0

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

例如

<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 文档中的这一点，使用声明式方法时需要解析 DOM。但是，尽管 parseOnLoad: true 在我的情况下有效，但这不是最佳实践。

现在，我们需要做的是调用 dojo/parser。在 Dojo 1.7 中采用 AMD 之前，您可以安全地使用 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-05T13:24:10.560 回答