0

jquery モバイルで口ひげテンプレート エンジンを使用しています。私のhtmlがjqmで正しくフォーマットされていない理由がわかりません。これが私のhtml/スクリプトです：

  <body>
    <div id="john" data-role="page">
      <div id="header" data-role="header"></div>
      <div id="content" data-role="content"></div>
      <div id="footer" data-role="footer"></div>
    </div>
    <script>
        var data = {
            technique : "Knee Slide Pass",
            steps : ["Step 1", "Step 2", "Step 3"],
            msg : "Hard Works Pays Off"
        };
        $.get('template.html', function(templates) {
            var header = $(templates).filter('#tpl-header').html();
            var content = $(templates).filter('#tpl-content').html();
            var footer = $(templates).filter('#tpl-footer').html();
            $('#header').html(Mustache.to_html(header, data));
            $('#content').html(Mustache.to_html(content, data));
            $('#footer').html(Mustache.to_html(footer, data));
            //$('#footer').html(Mustache.to_html(footer, data)).trigger('create');
            //$this.trigger('create').trigger('refresh').page();

        });
    </script>
  </body>

これが私のtemplate.htmlです：

<div id="tpl-header">
  <h1>{{technique}}</h1>
</div>

<div id="tpl-content">
  <ul id="loader">
    {{#steps}}
    <li>
      {{.}}
    </li>
    {{/steps}}
  </ul>
</div>
<div id="tpl-footer">
  <h1>{{msg}}</h1>
</div>

結果の Web ページには、コンテンツを含むヘッダーとフッターがあります。ただし、ヘッダーは非常に大きく、左側にあります (フッターと同じ)。ヘッダーとフッターをhtmlでハードコードするだけで機能します。しかし、jqm が html を更新すると、正しくフォーマットされません。.trigger('create') を追加するように読みましたが、機能しません。誰か助けてください、私はこれにあまりにも長い間取り組んできました。前もって感謝します！

ジョン

4

2 に答える 2

1

皆さんの助けと提案に感謝します。私は最終的にGoogleのさまざまな情報源から何をすべきかを理解し、ここで答えました。スクリプトの直前に空のdivを作成する必要がありました（ちなみに、jqmは後続のページのヘッダーでスクリプトを実行せず、メインページでのみ実行することがわかりました）。この空の div に「id=content」というラベルを付け、スクリプト呼び出しで destroy、次に page():

<body>
    <div data-role="page" data-add-back-btn=true>
      <div id="content"></div>
      <script>
        var data = {
            technique : "Knee Slide Pass",
            steps : ["Step 11", "Step 22", "Step 3"]
        };

        $.get('template.html', function(template) {
            var content = $(template).filter('#tpl').html();
            $('#content').html(Mustache.to_html(content, data));
            $("div[data-role=page]").page("destroy").page();
        },"text");
      </script>
    </div>
  </body>

また、上記は私のブラウザーでのみ機能し、Android アプリケーション (webview の空白ページのみ) では、「テキスト」を追加するまで機能しませんでした); get メソッドの一部として。

jqm を使用してドロイド アプリを開発するのはこれが初めてです。これが私が知っておくべきことだった場合は申し訳ありません。学ぶことがたくさん... :>

ジョン

于 2013-02-06T20:11:04.563 に答える
0

これは間違いなく「ページの更新」の問題です。jQMは、実際にはページの読み込み時にページの独自の「解析」を行うことを忘れないでください。これは、すべてが最初にプリティファイされる方法です。したがって、DOMノードまたはコンテンツを追加するときは、必ずjQMに通知する必要があります。

関連する質問は次のとおりです。jQueryMobileページの更新メカニズム

私はこの行で遊んでみます：

$this.trigger('create').trigger('refresh').page();

->

$.mobile.activePage.trigger('create')

またはそれらの線に沿った何か。

理想的には、実際にはすでにDOMにページがあり、新しいコンテンツをそのページに挿入してから呼び出す$.mobile.changePage("#pageId");だけです。

于 2013-02-05T17:01:50.883 に答える