我将 backbone.js (0.5.3) 与 JQueryMobile (1.0 beta 2) 一起使用。我知道一起使用这些库时会发生路由冲突,我想知道是否有使用它们的解决方案:
- 无需像 Ben Nolan 的 pots 中描述的那样侵入 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 页面 Canvas ”,将其附加到 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" );
工作起来很有魅力,没有任何不必要的技巧:)
如果它可以帮助任何人,这是我的完整主干 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"> </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" )
关于javascript - 没有 hack 或其他路由器的 Backbone.js 和 jQueryMobile 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7172294/