jQuery Mobile / Handlebars - 打开一个面板隐藏了data-role = content div

时间:2013-12-28 11:52:57

标签: jquery jquery-mobile handlebars.js

我正在尝试使用带有jQuery mobile的Handlebars。我正在使用jQuery 1.9.1,jQueryMobile 1.4,Handlebars 1.1.2。

<div data-role="page" id="attach-template">

    <div data-role="panel" id="mypanel">
           <div data-role="header">
                    <h1>Title</h1>
                </div><!-- /header -->
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="promotions.html">Promotions</a></li>
                        <li><a href="events.html">Events</a></li>
                    </ul>
                </nav>
          </div>

        <script id="content-template" type="text/x-handlebars-template">



          <div data-role="header">
                <a href="#mypanel" data-icon="gear">M</a>
                <h1>{{title}}</h1>
            </div>

            <div data-role="content" id="listview-content">
            HELLO!

        </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>

        </script>

    </div><!-- /page -->

问题是,当我加载页面,拉入数据,编译模板并将它们附加到data-role =“page”时,它显示正常,但是当我点击打开面板按钮时,数据-role =“内容”消失。看看chrome dev工具,它看起来像jQM不会像页眉和页脚一样移动或附加这个div。

任何建议为什么只有这个div才能做到这一点而不是所有这些?

我也试过在handlebars.append之后调用以下内容但是没有做任何事情:

$("#listview-content").trigger('create');
$('#mypanel').trigger('updatelayout');
$('body').trigger('create');
$('body').trigger('pagecreate');

1 个答案:

答案 0 :(得分:2)

使用内部或外部面板时,使用 ui-panel-wrapper 类在div中包装 content div ,以避免重新加载 content div 第一次打开面板时。

<div class="ui-panel-wrapper">
  <div class="ui-content">
  </div>
</div>