Маршрутизация Backbone.js и jQueryMobile без взлома или другого роутера

Question

Я использую backbone.js (0.5.3) с JQueryMobile (1.0 beta 2). Я знаю, что существуют конфликты маршрутизации при совместном использовании этих библиотек, и я хотел бы знать, есть ли решение использовать их:

• без взлома исходного кода jquery для мобильных устройств, как описано в банках Бена Нолана: http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• и без использования другого маршрутизатора, такого как jquerymobile-router (если нет другой опции ...)

Моя проблема очень похожа на описанную в этом посте: 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 mobile еще не рендерил dom ...

Спасибо за любую помощь!

Обновление

У Адди Османи, кажется, есть ответ на мой вопрос :), но это будет следующая часть его (великого) урока: 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» в конструкторе Backbone View, добавляю его в HTML-документ body и устанавливаю свой элемент представления el в этот новый div :

Backbone.View

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

В jquery 1.2.0 отключите ajax и linkBinding

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

after, после чего с обычными маршрутами Backbone вы можете связать #id с

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

Answer 3

Это может показаться чем-то большим, так как у меня нет возможности проверить это, но попробуйте расширить историю 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();

Это может сделать это или, по крайней мере, вывести вас на правильный путь, я надеюсь.