我在JQueryMobile(1.0 beta 2)中使用 Backbone .js(0.5.3)。我知道将这些库一起使用时存在路由冲突,并且我想知道是否存在使用它们的解决方案:

  • ,而不会像Ben Nolan的壶中所述侵入jQuery移动源代码:http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
  • ,并且不使用其他路由器(如jquerymobile-router)(除非没有其他选择...)

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

    当我发出请求时,相应的主干 View 的主干render代码会在新的jquery页面完全加载之前触发。我正在尝试在$(".ui-page-active") DOM元素中呈现html生成的代码,以定位jQueryMobile生成的页面(或“已激活”的页面):
    MyView = Backbone.View.extend({
      el: $(".ui-page-active")
      render: function(){
        console.log(el)
      }
    });
    

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

    谢谢你的帮助 !

    更新

    阿迪·奥斯曼尼(Addy Osmani)似乎已经回答了我的问题:),但这将是他(出色的)教程的下一部分的内容:
    http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx

    最佳答案

    确定的解决方案是禁用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 page canvas”,将其附加到HTML文档body并将我的el view元素设置为此新的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" );
    

    像魅力一样工作,没有任何不必要的技巧:)

    这是我的完整 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" )
    

    10-05 20:39
    查看更多