बैकबोन.जेएस और jQueryमोबाइल रूटिंग हैक या अन्य राउटर

Question

मैं jQueryMobile (1.0 बीटा 2) के साथ backbone.js (0.5.3) का उपयोग कर रहा हूं। मैं जानता हूँ कि मार्ग संघर्ष जब उन पुस्तकालयों का एक साथ उपयोग कर रहे हैं, और मैं अगर वहाँ उन्हें इस्तेमाल करने के लिए एक समाधान है जानना चाहूंगा:

• बेन नोलन के बर्तन में वर्णित की तरह jQuery मोबाइल स्रोत कोड में हैकिंग के बिना: http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• और jquerymobile रूटर की तरह एक और रूटर का उपयोग किए बिना

मेरे समस्या काफी इस पोस्ट में वर्णित एक के समान है (जब तक कोई अन्य विकल्प ... है): jquery-mobile backbone.js routing

जब मैं कोई अनुरोध करता हूं, तो नया jquery पृष्ठ पूरी तरह से लोड होने से पहले रीढ़ की हड्डी के render संबंधित रीढ़ की हड्डी दृश्य का कोड ट्रिगर हो जाता है। मैं $(".ui-page-active") डोम तत्व में कोड पेज है कि jquerymobile द्वारा उत्पन्न होता है (या पृष्ठ है कि "सक्रिय") को लक्षित करने के लिए उत्पन्न मेरी एचटीएमएल रेंडर करने के लिए कोशिश कर रहा हूँ:

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

लेकिन el विशेषता रिक्त जब है रेंडर विधि कहा जाता है, क्योंकि jquery मोबाइल ने अभी तक डोम प्रदान नहीं किया है ...

किसी भी मदद के लिए धन्यवाद!

अद्यतन

Addy उस्मानी अपने प्रश्न का उत्तर है लगता है :) लेकिन इसके बारे में उसके (महान) ट्यूटोरियल अगले भाग के लिए किया जाएगा: http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

Answer 1

ठीक है समाधान jQuery मोबाइल 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 पेज कैनवास" बैकबोन दृश्य निर्माता में, निर्माण HTML दस्तावेज़ body से संलग्न और सेट मेरी el इस नए div:

बैकबोन के लिए तत्व देखें।देखें

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

वर्क्स एक आकर्षण की तरह और किसी भी अनावश्यक हैक्स :)

---

यहाँ है यह मदद कर सकते हैं, तो मेरा पूरा बैकबोन दृश्य के बिना कोई भी:

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 और बाद जो सामान्य रीढ़ मार्गों के साथ, आप

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