Backbone.js e routing jQueryMobile senza hack o altro router

Question

Sto usando backbone.js (0.5.3) con JQueryMobile (1.0 beta 2). So che ci sono conflitti di routing quando si usano quelle librerie insieme, e vorrei sapere se c'è una soluzione per usarli:

• senza l'hacking nel codice sorgente cellulare jquery come descritto in vasi di Ben Nolan: http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• e senza usare un altro router come jquerymobile-router (a meno che non v'è alcuna altra opzione ...)

il mio problema è molto simile a quello descritto in questo post: jquery-mobile backbone.js routing

Quando faccio una richiesta, il codice backbone render della corrispondente vista backbone viene attivato prima che la nuova pagina jquery sia completamente caricata. Sto cercando di rendere il mio codice HTML generato nell'elemento $(".ui-page-active") DOM di indirizzare la pagina che viene generata da jQueryMobile (o la pagina che è "attivato"):

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

Ma l'attributo el è vuota quando il viene chiamato il metodo di rendering, perché jquery mobile non ha ancora ...

Grazie per qualsiasi aiuto!

Aggiornamento

Addy Osmani sembra avere la risposta alla mia domanda :) ma sarà per la prossima parte della sua (grande) tutorial: http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

Answer 1

Ok la soluzione è disabilitare la funzione di caricamento Ajax di jQuery Mobile e chiamare il metodo $.mobile.changePage manualmente.

pagina 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> 

Poi ogni volta che un nuovo percorso viene attivato, in primo luogo ho costruire la mia nuova "pagina canvas jQuery" nella spina dorsale View costruttore, aggiungere al documento HTML body e impostare il mio el visualizza elemento in questo nuovo div:

Backbone.Vista

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

E nel metodo 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"); 

funziona come un fascino e senza alcun hack inutili :)

---

Qui è la mia piena Backbone Vedi se si può aiutare chiunque:

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

Questo può essere un po 'di una longshot in quanto non ho modo di testarlo, ma provare ad estendere la cronologia di Backbone e fargli ascoltare un evento di creazione prima di attivare effettivamente il codice. Quindi ..

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

Questo potrebbe farlo, o almeno farti sulla strada giusta spero.

Answer 3

con jQuery 1.2.0, disabilitare Ajax e linkBinding

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

dopo, che con i normali percorsi Backbone, è possibile collegare un #id con

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