我注意到有些网站提供Ajax-ian搜索,刷新URL并显示使用的GET参数,例如:
someapp.com/search/Tokyo?price_min=80&price_max=300
作为Ajax GET请求的结果。
我想知道如何通过使用 Backbone.js 来实现这一点,我知道通过使用主干的推送状态这可能是可能的,我是对的吗? / p>
我怎样才能为Place模型定义这样的路线(例如,相同的情况,范围为/搜索)?
我会在哪里这样做?在路由器或模型中?
我很欣赏有关此主题的所有答案。我提前为没有提供任何代码而道歉,我通常会这样做,但是这个练习将是我想要的概念证明,我希望骨干是适合这项工作的工具。
谢谢!
答案 0 :(得分:5)
这是解决方案的一个工作示例 - jsfiddle.net/avrelian/dGr8Y/,但jsFiddle不允许Backbone.history.navigate
方法正常运行。
假设我们有一个按钮
<input class="fetch-button" type="button" value="Fetch" />
和处理程序
$('.fetch-button').click(function() {
Backbone.history.navigate('posts/?author=martin', true);
});
这是我们的帖子集
var Posts = Backbone.Collection.extend({
url: 'api/posts'
});
这是我们的路由器,带有自定义参数提取器
var Router = Backbone.Router.extend({
routes: {
'posts/?:filters': 'filterPosts'
},
filterPosts: function(filters){
posts.fetch({data: $.param(filters)});
},
_extractParameters: function(route, fragment) {
var result = route.exec(fragment).slice(1);
result.unshift(deparam(result[result.length-1]));
return result.slice(0,-1);
}
});
简化了$ .deparam analog。你可以改用自己的。
var deparam = function(paramString){
var result = {};
if( ! paramString){
return result;
}
$.each(paramString.split('&'), function(index, value){
if(value){
var param = value.split('=');
result[param[0]] = param[1];
}
});
return result;
};
最后,实例化帖子集合和路由器对象
var posts = new Posts;
var router = new Router;
Backbone.history.start();
当用户点击按钮地址栏时,会更改为myapp.com/s/#posts?author=martin
。请注意标记#
。我们使用哈希查询字符串。当然,您可以使用push state
,但它尚未普及。