Backbone.js和jQueryMobile路由沒有黑客或其他路由器

Question

我使用JQueryMobile（1.0 beta 2）backbone.js（0.5.3）。我知道有使用這些庫時一起路由衝突，我想知道是否有使用它們的解決方案：

• 沒有黑客到jQuery Mobile的源代碼，就像在本諾蘭的盆描述：http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• 並沒有使用其他路由器一樣jquerymobile路由器（除非沒有其他選項...）

我的問題是非常相似，在這篇文章中所描述的：jquery-mobile backbone.js routing

當我發出請求時，相應骨幹視圖的主幹render代碼在新的jquery頁面被完全加載之前被觸發。我試圖使我生成的HTML在$(".ui-page-active") DOM元素代碼到目標由jQueryMobile生成頁面（或者是「激活」頁面）：

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

但el屬性爲空當渲染方法被稱爲，因爲jquery手機還沒有渲染的目標...

感謝您的任何幫助！

更新

阿迪·奧斯馬尼似乎有回答我的問題:)但是這將是他的（大）的教程的下一部分： 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的頁面畫布」，其追加到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

這可能是有點因爲我沒有辦法測試它，但是嘗試擴展Backbone的歷史記錄，讓它在實際觸發代碼之前監聽創建事件。所以..

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，禁用阿賈克斯之後，這與正常的骨幹線路，你可以用

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