0

私はこれを100％間違っていると90％確信しています：

Phonegap + jQuery Mobileアプリを構築しており、アプリにできるだけ多くのコードの再利用を構築しようとしています。複数のhtmlファイルがあります

<div data-role="page" id="page_name">

アプリのページページの要素。各ページ要素には、典型的なものがあります。

<div id="header" data-role="header">
</div><!-- /header -->

<div data-role="content">
<p>Page Info</p>
</div><!-- /content -->

そして最後に：

<div data-role="footer" data-id="footnav" data-position="fixed">
   <div data-role="navbar">
       <ul><li></li></ul>
   </div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->

ここで、再利用の精神で、data-role = "navbar" divに同じものを入力したいので、次のような口ひげのテンプレートをまとめました。

function doNavigationMenu() {
  var navdata = {
     navlist: [
        { href : "ixinfo", text: "Ix" },
        { href : "ptinfo", text: "Px" },
        { href : "dxinfo", text: "Dx" },
        { href : "rxinfo", text: "Rx" },
        { href : "txinfo", text: "Tx" }
     ]
  };

  var template = "{{#navlist}}<li><a href='#{{href}}'>{{text}}</a></li>{{/navlist}}";
  var content = $.mustache(template, navdata);
  console.log(content); 
  $(".navbar ul").html( content ); **//<<< this doesn't work**
  $(".footnav").trigger( 'create' ); **//<<<This doesn't work**
}

この関数はphonegaponDeviceReadyイベントによって呼び出され、アプリがhtmlをいじくり回す準備ができていることを確認します。しかし、CSSクラスがjQuery mobileによって適用された後にコンテンツを変更しており、これは単一のページであるため（巨大なステートマシンを構築する必要をなくすため）、jQueryMobileスタイルが最初の「ページ」にありません。私は最初にすべてのnavbardivに同じIDを与えましたが、それはばかげていますが、私が選択しなければならない他の唯一のものはdata-role="navbar"、であり、今は方法がわかりません。私は.trigger('create')すべてのnavbarで発砲する必要があることを読みましたが、その方法に困惑しています。

要約：複数のページを持つ単一のhtmlファイルを使用したいのですが、モバイルアプリのコードのメンテナンスとサイズを簡単にするために口ひげテンプレートを使用しており、その方法がわかりません。

4

1 に答える 1

1

私のフィドルを見てください、

http://jsfiddle.net/idangozlan/27QMM/1/

正しいセレクターを使用していません$('[data-role="navbar"]')。

于 2013-03-12T22:47:32.733 に答える