jQuery Mobile / Handlebars - Opening a panel hides

Question

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');

Answer 1

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>