0

以前は 1.4.x を使用していたので、Dojo 1.9 を学習しようとしています。いくつかのチュートリアルを見て、dojox/mobile/EdgeToEdgeList のいくつかの例を試していました。私はそれを理解していないようです。

http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/EdgeToEdgeList.htmlからサンプル コードをコピーした後、CDN がホストする dojo ツールキットを使用して宣言 (CSS スプライトの例) を行いました。ただし、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>
4

1 に答える 1

0

CDN から Dojo をロードするための data-dojo-config 属性に parseOnLoad: true を追加すると、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 に答える