Question

我正在尝试学习Dojo 1.9，之前曾使用过1.4.x.一直在看一些教程，并尝试了一些dojox / mobile / EdgeToEdgeList的例子。我似乎没有得到它。

使用CDN托管的dojo工具包复制了来自http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/EdgeToEdgeList.html的示例代码，用于声明性（CSS sprite示例）。但是，除了使用dojo移动样式设置了3个项目符号的默认HTML无序列表外，不会显示任何内容。 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>

Answer 1

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

E.g。

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

编辑：进行研究后得到更完整的答案。我的原始问题中的代码不起作用的原因是我使用Declarative样式作为我的EdgeToEdgeList小部件，根据这在Dojo 1.9 documentation使用声明方法时需要解析DOM。但是，尽管parseOnLoad：true在我的情况下有效，但这不是最好的做法。

现在，我们需要做的是调用dojo / parser。通过之前在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>

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

Dojo移动EdgeToEdgeList教程未显示

1 个答案: