Javascript Backbone.js和jQueryMobile路由，无hack或其他路由器

我将backbone.js（0.5.3）与JQueryMobile（1.0 beta 2）一起使用。我知道在一起使用这些库时存在路由冲突，我想知道是否有使用它们的解决方案：

• 没有像Ben Nolan的pots中所描述的那样侵入jquery移动源代码：
• 并且不使用另一个路由器，如jquerymobile路由器（除非没有其他选项…）

我的问题与本文描述的问题非常相似：

当我发出请求时，相应主干视图的主干

render

代码在新jquery页面完全加载之前被触发。我正在尝试在

$（“.ui page active”）

DOM元素中呈现html生成的代码，以指向jQueryMobile生成的页面（或“已激活”的页面）：

但是调用render方法时，

el

属性为空，因为jquery mobile尚未呈现dom

谢谢你的帮助

更新

Addy Osmani似乎对我的问题有答案：）但这将是他（伟大）教程的下一部分：

---

这可能有点长，因为我没有办法测试它，但请尝试扩展主干的历史记录，并让它在实际启动代码之前侦听创建事件。所以

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

---

这也许可以做到，或者至少让您走上正确的道路，我希望如此。

好的解决方案是禁用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>

在

渲染

方法中：

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

classlogsview扩展了主干
构造函数：（选项）->
超级的
$（“正文”）。前置（“”
""")
@el=$（“#日志视图”）
@日志=选项。日志
@collection.bind“重置”，@render
@template=ux0.template（“”）




''')
@template_header=u.template（“”）
卡内特
''')
渲染：=>
#使用undescore.js模板系统构建内容
@el.find（'.cloudy content'）.html（@template（{logs:@collection}））
@el.find（'.cloudy header'）.html（@template_header（{logbook:@logbook}））
#使用jquery mobile更改页面并重新应用jquery样式
$.mobile.changePage（@el，“slide”，false，false）
@el.触发器（“页面创建”）

使用jquery 1.2.0，禁用ajax和链接绑定

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

之后，通过正常主干路由，您可以将#id链接到

刚刚尝试了此操作，但从未调用

处理程序.callback（片段）

。。。在主干网执行回调（路由器中的相应函数）之前，似乎不会触发

pagecreate

事件。在这种情况下，jQuery等待主干，主干等待jQuery，这是一个死锁…您在哪个事件上初始化应用程序$（'document'）.ready（）或$（document.bind（'pageinit'）？我尝试按照您的建议进行操作，但遇到主干路由器错误。注意：$（document）.bind（“mobileinit”…调用必须在加载jquery之后和加载jquery mobile之前进行是的！我只使用jquery mobile获得固定的页眉/页脚支持。这切断了破坏我网站的独角兽。

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

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

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