How to render jQuery Mobile in dynamic clientside templates from a Backbone view?

Question

I'm building a mobile website using Brunch.

For the user interface, I want to use jQuery Mobile.

I started out adapting the existing home_view (Backbone.View) as such:

class exports.HomeView extends Backbone.View
  id: 'home-view'

  render: ->
    console.log "render() homepage"

    $(@el).html require('./templates/home')

    $.mobile.changePage('#homepage', 'slide', false, false)
    console.log $(@el)

    @

This doesn't work, and I suspect it's because Backbone 'injects' the html before or after jQuery Mobile is initialized or something?

I can inspect the markup using Firebug and Chrome's Inspect Element, but the div elements are set to display:none; (so again this seems to point to jQuery Mobile not initializing or something like that)

./templates/home is a simple 'eco' template with some basic jQuery Mobile markup, and it looks like this: (and gets injected into the body tag)

<div data-role="page" id="homepage">
    <div data-role="navbar">
        <ul>
            <li><a href="/" class="ui-btn-active">Home</a></li>
        <li><a href="#helppage">Help</a></li>
    </ul>
    </div><!-- /navbar -->

    <div data-role="content">
        <div id="home">
            <h1>Home</h1>
        </div>
    </div>
</div>

I've searched around SA and Google for solutions but didn't manage to pull it off. Any tips would be highly appreciated. Thanks!

Answer 1

As stated somewhere in a comment on this question, you can do this after rendering your page:

$("#pageId").trigger("create");

This will force jQuery Mobile to update your page and fix your problem.