Enrutamiento Backbone.js y jQueryMobile sin hack u otro enrutador

Question

Estoy usando backbone.js (0.5.3) con JQueryMobile (1.0 beta 2). Sé que hay conflictos de enrutamiento cuando se utilizan las bibliotecas juntos, y me gustaría saber si hay una solución para usarlos:

• sin la intrusión en el código fuente móvil jQuery como se describe en macetas de Ben Nolan: http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• y sin utilizar otro router como jquery mobile router (a menos que no hay otra opción ...)

Mi problema es bastante similar a la descrita en este post: jquery-mobile backbone.js routing

Cuando cuando realizo una solicitud, se activa el código de la red troncal render de la vista troncal correspondiente antes de que la nueva página jquery esté completamente cargada. Estoy tratando de hacer mi código HTML generado en el elemento DOM $(".ui-page-active") para apuntar la página que se genera por jquery mobile (o la página que se "activa"):

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

Pero el atributo el está vacío cuando el se llama al método de renderizado, porque jquery mobile todavía no ha procesado el dom ...

¡Gracias por la ayuda!

actualización

Addy Osmani parece tener la respuesta a mi pregunta :) pero será para la siguiente parte de su (gran) tutorial: http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

Answer 1

Ok, la solución es deshabilitar la característica de carga de jQuery Mobile ajax y llamar al método $.mobile.changePage manualmente.

página 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> 

Entonces cada vez que se activa una nueva ruta, en primer lugar construir mi nueva "jQuery página de lienzo" en el Backbone Ver constructor, lo añaden al documento HTML body puso mis el ver elemento a este nuevo div:

Backbone.Ver

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

Y en el render método:

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

funciona de maravilla y sin ningún tipo de cortes innecesarios :)

---

Aquí está mi espinazo completo si puede ayudar cualquier persona:

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

Esto puede ser un poco de un tiro largo ya que no tengo forma de probarlo, pero trate de extender la historia de Backbone, y haga que escuche un evento de creación antes de disparar el código. Entonces ...

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

Eso podría hacerlo, o al menos llevarlo por el camino correcto, espero.

Answer 3

con jQuery 1.2.0, desactivar Ajax y linkBinding

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

después, que con las rutas troncales normales, puede vincular una #id con

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