Backbone.js and jQueryMobile routing without hacking or another router

Question

I am using backbone.js (0.5.3) with JQueryMobile (1.0 beta 2). I know that there are routing conflicts when sharing these libraries, and I would like to know if there is a solution for using them:

• without hacking into jQuery source code, as described in Ben Nolan banks: http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• and without using another router like jquerymobile-router (if there is no other option ...)

My problem is very similar to that described in this post: jquery-mobile backbone.js routing

When, when I make a request, the base code of the rendercorresponding baseline view is run before a new jquery page is loaded. I am trying to make my HTML code in a $(".ui-page-active")DOM element to target a page created by jQueryMobile (or an activated page):

MyView = Backbone.View.extend({
  el: $(".ui-page-active")
  render: function(){
    console.log(el)
  }
});

But the attribute is elempty when the render method is called, since jquery mobile has not yet displayed dom ...

Thanks for any help!

Update

Addi Osmani seems to have an answer to my question :), but it will be for the next part of his (large) tutorial: http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

Answer 1

, jQuery Mobile ajax $.mobile.changePage .

HTML-:

    <script type="text/javascript" charset="utf-8" src="js/mobile/jquery.js"></script>
    <script type="text/javascript">
      $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled = false;
        $.mobile.hashListeningEnabled = false;
      });
    </script>
    <script type="text/javascript" charset="utf-8" src="js/mobile/jquery-mobile.js"></script>

, , " jQuery" Backbone View, HTML body el div

Backbone.View

    $("body").prepend("""
      <div id="my-id" data-role="page" class="cloudy-background-mobile">
        <div class="cloudy-header" data-role="header" data-position="fixed"></div>
        <div class="cloudy-content" data-role="content"></div>
      </div>
    """)
    this.el = $("#logs-view")

render:

// 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" );

:)

---

Backbone View, :

class LogsView extends Backbone.View
  constructor: (options) ->
    super
    $("body").prepend("""
      <div id="logs-view" data-role="page" class="cloudy-background-mobile">
        <div class="cloudy-header" data-role="header" data-position="fixed"></div>
        <div class="cloudy-content" data-role="content"></div>
      </div>
    """)
    @el = $("#logs-view")
    @logbook = options.logbook
    @collection.bind 'reset', @render

    @template = _.template('''
      <ul data-role="listview" data-theme="c" data-inset="true">
        <% logs.each(function(log){ %>
          <li>
            <a href="#logs-<%= log.cid %>"><%= log.getLabel() %></a>
          </li>
        <% }); %>
      </ul>
    ''')

    @template_header = _.template('''
      <h1>Carnets <%= logbook.get('name') %></h1>
      <a href="#logbook-<%= logbook.cid %>-logs-new" data-icon="plus" class="ui-btn-right">&nbsp;</a>
    ''')

  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" )

Answer 2

, , , . ..

MyHistory = Backbone.History.extend({
    loadUrl : function(fragmentOverride) {
      var fragment = this.fragment = this.getFragment(fragmentOverride);
      var matched = _.any(this.handlers, function(handler) {
        if (handler.route.test(fragment)) {
          //This is the only change from core code.. 
          //We're just wrapping it into a callback.
          $('.ui-page-active').one('pagecreate', function () {
              handler.callback(fragment);
          });
          return true;
        }
      });
      return matched;
    }
});
MyHistory.start();

, , , .

Answer 3

jquery 1.2.0 ajax linkBinding

$(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.pushStateEnabled = false;
  });

after, which with regular trunk routes you can associate #id with

<a href="#id" onclick="window.app_router.navigate('new', true)">Report</a>