0

我 90% 确定我做错了 100%：

我正在构建一个 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。但是由于我在 jQuery mobile 应用 CSS 类之后修改内容，并且因为这是一个单页（以避免必须构建一个巨大的状态机），所以第一个“页面”上缺少 jQuery Mobile 样式。我最初为所有navbardiv 提供了相同的 ID，但这很愚蠢，但我必须选择的唯一另一件事是data-role="navbar"，而我现在不知道如何选择。我已经读到我需要在.trigger('create')我的所有导航栏上触发，但我不知道该怎么做。

总而言之：我想使用具有多个页面的单个 html 文件，但使用 mustache 模板可以更轻松地维护我的移动应用程序中的代码大小，但不知道如何。

4

1 回答 1

1

看看我的小提琴，

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

您没有使用正确的选择器，应该是$('[data-role="navbar"]')..

于 2013-03-12T22:47:32.733 回答