Backbone.js and jQueryMobile routing without hack or other router

Question

I am using backbone.js (0.5.3) with JQueryMobile (1.0 beta 2). I know there are routing conflicts when using those libraries together, and I would like to know if there is a

Answer 1

Ok the solution is to disable jQuery Mobile ajax loading feature and call the $.mobile.changePage method manually.

HTML page :

Then whenever a new route is triggered, I first build my new "jQuery page canvas" in the Backbone View constructor, append it to the HTML document body and set my el view element to this new div :

Backbone.View

    $("body").prepend("""
      

        

        

      
    """)
    this.el = $("#logs-view")

And in the render method :

// Build the content using undescore.js templating system
this.el.find('.cloudy-content').html(this.template({logs : this.collection}));
this.find('.cloudy-header').html(this.template_header({logbook: this.logbook}));

// Change the page using jquery mobile and reapply jquery styles
$.mobile.changePage(this.el, "slide", false, false);
this.trigger( "pagecreate" );

Works like a charm and without any unnecessary hacks :)

---

Here is my full Backbone View if it can help anyone :

class LogsView extends Backbone.View
  constructor: (options) ->
    super
    $("body").prepend("""
      

        

        

      
    """)
    @el = $("#logs-view")
    @logbook = options.logbook
    @collection.bind 'reset', @render

    @template = _.template('''
      

        <% logs.each(function(log){ %>
          

            <%= log.getLabel() %>
          
        <% }); %>
      
    ''')

    @template_header = _.template('''
      
Carnets <%= logbook.get('name') %>
       
    ''')

  render: =>
    # Build the content using undescore.js templating system
    @el.find('.cloudy-content').html(@template({logs : @collection}))
    @el.find('.cloudy-header').html(@template_header({logbook: @logbook}))

    # Change the page using jquery mobile and reapply jquery styles
    $.mobile.changePage(@el, "slide", false, false)
    @el.trigger( "pagecreate" )