我正在使用 Backbone.js 和 jQuery-mobile。 jQuery 移动路由被禁用,我仅将库用于 UI。除了选择页面转换之外,我一切正常。我需要将页面转换(“向上切片”、“淡入淡出”、“向下滑动”)传递到主干路由器,因为转换根据用户来自的位置而变化。
我想出了一个非常丑陋的方法来做到这一点,通过网址传递它们:
class App.Routers.Foods extends Backbone.Router
routes:
'': 'index'
':transition': 'index'
'foods/new': 'new'
'foods/new/:transition': 'new'
initialize: ->
@collection = new App.Collections.Foods()
@collection.fetch()
index: (transition)->
view = new App.Views.FoodIndex(collection: @collection)
App.changePage(view, transition)
new: (transition)->
view = new App.Views.FoodNew(collection: @collection)
App.changePage(view, transition)
这是默认转换的 html 链接:
<a href="#" data-icon="back" class="ui-btn-left">Back</a>
这是淡入淡出过渡的 html 链接:
<a href="#fade" data-icon="back" class="ui-btn-left">Back</a>
使用查询字符串,即 /food/new?transition='fade' 肯定更好,但我不知道如何定义主干路由以使用查询字符串变量。
我该怎么做?
有没有更优雅的方法来处理我的问题,即根本不使用 url 传递变量?
您必须手动解析路由器函数内的 URL 参数。
class App.Routers.Foods extends Backbone.Router
routes:
'': 'index'
'foods/new': 'new'
initialize: ->
@collection = new App.Collections.Foods()
@collection.fetch()
index: ()->
view = new App.Views.FoodIndex(collection: @collection)
App.changePage(view, getQueryVariable('transition'))
new: ()->
view = new App.Views.FoodNew(collection: @collection)
App.changePage(view, getQueryVariable('transition'))
JS函数 https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript解析查询参数。
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return unescape(pair[1]);
}
}
return false;
}
当然,您必须将 JS 函数转换为 CS 函数,但您已经明白了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)