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>