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

Posted 2023-05-09

【中文标题】jQuery Mobile / Handlebars - 打开面板隐藏 data-role=content div

【英文标题】：jQuery Mobile / Handlebars - Opening a panel hides the data-role=content div

【发布时间】：2014-01-15 20:14:44

【问题描述】：

我正在尝试将 Handlebars 与 jQuery mobile 一起使用。我正在使用 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="content" 消失。查看 chrome 开发工具，看起来 jQM 并没有像使用页眉和页脚那样移动或附加这个 div。

有什么建议为什么只有这个 div 可以做到这一点，而不是全部？

我也尝试在 handlebars.append 之后调用以下命令，但没有执行任何操作：

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

【问题讨论】：

您是否将数据附加到面板或页面？你的 html 有点模糊。

是的，没错。一旦我从服务器获取数据并编译模板，我就会将该车把模板中的所有内容附加到#attach-template。所以最终的 HTML 看起来就像我粘贴的样子，只是没有

添加项目后尝试$("page_id").enhancewithin();。

忘了说，用类ui-panel-wrapper将内容div包装在div中。

谢谢奥马尔！在 中包装所有内容（包括页眉和页脚）都有效。仅环绕内容 div 时出现了一些故障。没有注意到 .enhancewithin();做任何事情，所以把它排除在外。

【参考方案1】：

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

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

【讨论】：

这是最好的解决方案。它就像一个魅力，加载时不移动内容。谢谢。