Backbone.js und jQueryMobile routing ohne hack oder anderen router

Ich bin mit backbone.js (0.5.3) mit JQueryMobile (1.0 beta 2). Ich weiß, es gibt routing-Konflikte bei der Verwendung dieser Bibliotheken zusammen, und ich würde gerne wissen, ob es eine Lösung gibt, Sie zu nutzen :

Mein problem ist ziemlich ähnlich zu der in diesem post beschrieben : jquery-mobile backbone.js routing

Als wenn ich einen Antrag stellen, das Rückgrat render code der entsprechenden backbone-view wird ausgelöst, bevor die neue jquery-Seite vollständig geladen ist. Ich bin versucht, um meinen html-code generiert in der $(".ui-page-active") DOM-element, um das Ziel der Seite, die generiert wird, von jQueryMobile (oder die Seite, die ist "aktiviert") :

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

Aber die el - Attribut leer ist, wenn der render-Methode aufgerufen wird, da jquery mobile noch nicht erbracht hat, den dom...

Vielen Dank für jede Hilfe!!!

Update

Addy Osmani scheint die Antwort auf meine Frage 🙂 aber es wird für den nächsten Teil seiner (großen) tutorial :
http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

InformationsquelleAutor Tricote | 2011-08-24
  1. 10

    Ok, die Lösung ist das deaktivieren von jQuery Mobile-ajax-loading-Funktion, und rufen Sie die $.mobile.changePage Methode manuell.

    HTML-Seite :

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

    Dann, wenn eine neue route ausgelöst wird, habe ich als erstes meine neue "jQuery Seite die Leinwand" in den Backbone-View-Konstruktor, hängen Sie an das HTML-Dokument body und meine el view-element an dieser neuen div :

    Rückgrat.Ansicht

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

    Und in der render Methode :

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

    Funktioniert wie ein Charme und ohne unnötige hacks 🙂

    Hier ist mein voller Backbone-Ansicht angezeigt, wenn es kann jemand helfen :

    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" )
    • auf welches Ereignis haben Sie init Ihrem app? $('document').ready() oder $(document).bind('pageinit')? Ich habe versucht zu Folgen, Ihre Anregungen aber an der backbone-router-Fehler.
    • Hinweis: $(document).bind("mobileinit" ... Aufruf muss erfolgen, nachdem jquery geladen wird & VOR jquery mobile ist geladen
    InformationsquelleAutor Tricote
  2. 1

    Kann dies ein wenig von einem longshot, da ich keine Möglichkeit habe es zu testen, aber versuchen Sie die Erweiterung Rückgrat der Geschichte, und haben es zu hören Erstellungs-Ereignis, bevor Sie tatsächlich Schießen aus dem code. So..

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

    Könnte es tun, oder Sie wenigstens auf dem richtigen Weg hoffe ich.

    • Gerade dies versucht, aber die handler.callback(fragment) wird nie aufgerufen... es scheint, dass pagecreate - Ereignis nicht ausgelöst wird, bis Rückgrat hat ausgeführt, der Rückruf (die entsprechende Funktion im router). In diesem Fall, jQuery Wartet, Rückgrat, Rückgrat wartet auf jQuery, und es ist ein deadlock...
    InformationsquelleAutor Stephen
  3. 1

    Mit jquery 1.2.0, deaktivieren ajax und linkBinding

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

    nach, die mit normalen Backbone-Strecken, können Sie link ein #id mit 

    <a href="#id" onclick="window.app_router.navigate('new', true)">Report</a>
    • Ja! Ich bin nur mit jQuery mobile zu bekommen fixed header/footer-Unterstützung. Diese schneiden Sie das Einhorn, das war zu brechen meine Website.
    InformationsquelleAutor cggaurav
Schreibe einen Kommentar