jQuery Mobile / Handlebars - 打开面板隐藏了data-role = content div [英] jQuery Mobile / Handlebars - Opening a panel hides the data-role=content div

问题描述

我试图在jQuery mobile上使用Handlebars。我使用的是jQuery 1.9.1，jQueryMobile 1.4，Handlebars 1.1.2。

 < div data-role =page id =attach-template> 
 
< div data-role =panelid =mypanel> 
< div data-role =header> 
< h1>标题< / h1> 
< / div><！ -  / header  - > 
< nav> 
< ul> 
< li>< a href =index.html>主页< / a>< / li> 
< li>< a href =promotions.html>促销< / a>< / li> 
< li>< a href =events.html>活动< / a>< / li> 
< / ul> 
< / nav> 
< / div> 
 
< script id =content-templatetype =text / x-handlebars-template> 
 
 
 
< div data-role =header> 
< a href =＃mypaneldata-icon =gear> M< / a> 
< h1> {{title}}< / h1> 
< / div> 
 
< div data-role =contentid =listview-content> 
你好！ 
 
< / div><！ -  / content  - > 
 
< div data-role =footer> 
< h4>页面页脚< / h4> 
< / div> 
 
< / script> 
 
< / div><！ -  / page  - > 
  

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

有什么建议，为什么只是这个div，而不是所有这些？

我也是尝试在handlebars.append之后调用以下内容，但不执行任何操作：

  $（＃listview-content）。trigger （'创建'）; 
 $（'＃mypanel'）。trigger（'updatelayout'）; 
 $（'body'）。trigger（'create'）; 
 $（'body'）。trigger（'pagecreate'）; 
  

解决方案

使用内部或外部面板时， > content div 与div ui-panel-wrapper 类一起使用，以避免在第一次打开面板时重新加载 content div 。 b
$ b

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

I'm trying to use Handlebars with jQuery mobile. I'm using 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 -->

The trouble is that when I load the page, pull the data in, compile the templates and attach them to the data-role="page", it displays fine, but when I click on the open panel button, the data-role="content" disappears. Looking in chrome dev tools, it looks like jQM doesn't move or append this div like it does with header and footer.

Any suggestions why it's just this div that does this and not all of them?

I've also tried calling the following after handlebars.append but doesn't do anything :

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

解决方案

When using an internal or external panel, wrap content div in a div with ui-panel-wrapper class to avoid reloading content div when opening the panel for the first time.

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

这篇关于jQuery Mobile / Handlebars - 打开面板隐藏了data-role = content div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！