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

Question

我正在使用backbone.js(0.5.3)和JQueryMobile(1.0 beta 2).我知道在一起使用这些库时存在路由冲突,我想知道是否有使用它们的解决方案:

• 没有像Ben Nolan的花盆那样侵入jquery移动源代码:http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
• 而不使用像jquerymobile-router这样的其他路由器(除非没有其他选项...)

我的问题与本文中描述的问题非常相似:jquery-mobile backbone.js路由

当我发出请求时,render相应骨干视图的骨干代码会在新的jquery页面完全加载之前被触发.我正在尝试在$(".ui-page-active")DOM元素中呈现我生成的html代码,以定位由jQueryMobile(或"激活"的页面)生成的页面:

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

但是el调用render方法时该属性为空,因为jquery mobile尚未呈现dom ...

谢谢你的帮助 !

更新

Addy Osmani似乎有我的问题的答案:)但它将是他的(伟大的)教程的下一部分: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>

然后每当触发新路由时,我首先在Backbone View构造函数中构建我的新"jQuery页面画布",将其附加到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" );

像一个魅力,没有任何不必要的黑客:)

这是我完整的Backbone View,如果它可以帮助任何人:

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