backbone.js - 如何使用 Backbone 创建带有参数的自定义 GET url？

Question

我注意到一些网站提供 Ajax-ian 搜索，可以刷新 URL 并显示使用的 GET 参数，例如:

someapp.com/search/Tokyo?price_min=80&price_max=300

作为 Ajax GET 请求的结果。

我想知道如何通过使用 Backbone.js 来完成此操作，我知道通过使用 Backbone 的推送状态这可能是可能的，对吗？

例如，我如何为 Place 模型定义这样的路由(假设是相同的情况，作用域为/search)？

我应该在哪里做这件事？在路由器中还是在模型中？

我很感激关于这个主题的所有答案。我提前为没有提供任何代码而道歉，我通常会这样做，但这个练习将证明我想做的概念，我希望 backbone 是完成这项工作的正确工具。

谢谢!

Answer 1

这是解决方案的一个工作示例 - 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 类比。您可以改用自己的。

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;
};

最后，posts collection 和 router 对象的实例化

var posts = new Posts;

var router = new Router;
Backbone.history.start();

当用户点击按钮时，地址栏变为 myapp.com/s/#posts?author=martin。请注意符号 #。我们使用哈希查询字符串。当然，你可以使用push state，但目前还没有普及。