Backbone.js 和 jQueryMobile 路由，无需 hack 或其他路由器 [英] Backbone.js and jQueryMobile routing without hack or other router
问题描述
我将 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 bone.js路由
当我发出请求时，相应主干视图的主干 render 代码在新的 jquery 页面完全加载之前被触发.我正在尝试在 $(".ui-page-active") DOM 元素中呈现我的 html 生成代码，以定位由 jQueryMobile 生成的页面(或激活"的页面)) :
MyView = Backbone.View.extend({el: $(".ui-page-active")渲染:函数(){控制台日志(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 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>""")this.el = $("#logs-view")
在 render 方法中:
//使用 undescore.js 模板系统构建内容this.el.find('.cloudy-content').html(this.template({logs : this.collection}));this.find('.cloudy-header').html(this.template_header({logbook: this.logbook}));//使用 jquery mobile 更改页面并重新应用 jquery 样式$.mobile.changePage(this.el, "slide", false, false);this.trigger("pagecreate");像魅力一样工作，没有任何不必要的黑客:)
<小时>这是我的完整主干视图，如果它可以帮助任何人:
class LogsView 扩展了 Backbone.View构造函数:(选项)->极好的$("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>""")@el = $("#logs-view")@logbook = options.logbook@collection.bind '重置'，@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><% });％＞''')@template_header = _.template('''<h1>Carnets <%= logbook.get('name') %></h1><a href="#logbook-<%= logbook.cid %>-logs-new" data-icon="plus" class="ui-btn-right"> </a>''')渲染:=># 使用 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.trigger( "pagecreate" )
I am using backbone.js (0.5.3) with JQueryMobile (1.0 beta 2). I know there are routing conflicts when using those libraries together, and I would like to know if there is a solution to use them :
- without hacking into the jquery mobile source code like described in Ben Nolan's pots : http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html
- and without using another router like jquerymobile-router (unless there is no other option...)
My problem is quite similar to the one described in this post : jquery-mobile backbone.js routing
When when i make a request, the backbone render code of the corresponding backbone view gets triggered before the new jquery page is fully loaded. I'm trying to render my html generated code in the $(".ui-page-active") DOM element to target the page that is generated by jQueryMobile (or the page that is "activated") :
MyView = Backbone.View.extend({
el: $(".ui-page-active")
render: function(){
console.log(el)
}
});
But the el attribute is empty when the render method is called, because jquery mobile has not yet rendered the dom...
Thanks for any help !
Update
Addy Osmani seems to have the answer to my question :) but it will be for the next part of his (great) tutorial : http://msdn.microsoft.com/en-us/scriptjunkie/hh377172.aspx
Ok the solution is to disable jQuery Mobile ajax loading feature and call the $.mobile.changePage method manually.
HTML page :
<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>
Then whenever a new route is triggered, I first build my new "jQuery page canvas" in the Backbone View constructor, append it to the HTML document body and set my el view element to this new 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")
And in the render method :
// 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" );
Works like a charm and without any unnecessary hacks :)
Here is my full Backbone View if it can help anyone :
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" )
这篇关于Backbone.js 和 jQueryMobile 路由，无需 hack 或其他路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
