Backbone.js và định tuyến jQueryMobile mà không cần hack hoặc bộ định tuyến khác

Question

Tôi đang sử dụng backbone.js (0.5.3) bằng JQueryMobile (1.0 beta 2). Tôi biết có những xung đột định tuyến khi sử dụng các thư viện với nhau, và tôi muốn biết nếu có một giải pháp để sử dụng chúng:

• mà không cần hack vào mã nguồn di động jquery như được mô tả trong chậu Ben Nolan: http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• và không sử dụng bộ định tuyến khác như jquerymobile-router (trừ khi không có lựa chọn nào khác ...)

vấn đề của tôi là khá giống với một trong những mô tả trong bài này: jquery-mobile backbone.js routing

Khi tôi đưa ra yêu cầu, mã xương sống render của chế độ xem xương sống tương ứng được kích hoạt trước khi trang jquery mới được tải đầy đủ. Tôi đang cố gắng để render html của tôi tạo ra mã trong các yếu tố $(".ui-page-active") DOM để nhắm mục tiêu các trang đó được tạo ra bởi jQueryMobile (hoặc trang đó được "kích hoạt"):

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

Nhưng thuộc tính el trống khi phương thức kết xuất được gọi, vì jquery mobile chưa hiển thị số ...

Cảm ơn bạn đã trợ giúp!

Cập nhật

Addy Osmani dường như có câu trả lời cho câu hỏi của tôi :) nhưng nó sẽ được cho phần tiếp theo của mình (lớn) hướng dẫn: http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

Answer 1

Ok giải pháp là vô hiệu hóa tính năng tải jQuery Mobile ajax và gọi phương thức $.mobile.changePage theo cách thủ công.

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

Sau đó, bất cứ khi nào một con đường mới được kích hoạt, tôi lần đầu tiên xây dựng mới "jQuery vải trang" của tôi trong Backbone Xem constructor, thêm nó vào tài liệu HTML body và thiết lập của tôi el yếu tố chế độ xem này mới div:

Xương sống.Xem

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

Và trong render phương pháp:

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

trình như một nét duyên dáng và không có bất kỳ hacks không cần thiết :)

---

Dưới đây là Backbone đầy đủ của tôi Xem nếu nó có thể giúp bất kỳ ai:

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

Đây có thể là một chút một thời gian dài như tôi không có cách nào để kiểm tra nó, nhưng thử mở rộng lịch sử của Backbone, và có nó lắng nghe một sự kiện sáng tạo trước khi thực sự bắn ra khỏi mã. Vì vậy ..

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

Điều đó có thể làm điều đó, hoặc ít nhất giúp bạn đi đúng con đường mà tôi hy vọng.

Answer 3

Với jquery 1.2.0, vô hiệu hóa ajax và linkBinding

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

sau đó, mà với các tuyến đường Backbone bình thường, bạn có thể liên kết một #ID với

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