如何使用Backbone使用params創建自定義GET url？

Question

我注意到，一些網站提供了Ajax的伊恩搜索該刷新URL，並顯示使用GET參數，可以例如：

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

作爲Ajax GET請求的結果。

我想知道我怎麼能做到這一點，通過使用Backbone.js的，據我所知，通過骨幹按壓狀態這是可能的，對嗎？

我怎樣才能爲Place模型定義類似這樣的路線（比如說，範圍相同的搜索範圍）？

我該在哪裏做？在路由器或模型中？

我很感謝所有關於此主題的答案。我通常會提前道歉，因爲我沒有提供任何代碼，但這個練習將成爲我想要提出的概念的證明，我希望骨幹網是這項工作的正確工具。

謝謝！

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

最後，帖子收集和路由器對象

var posts = new Posts; 

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

當用戶點擊該按鈕地址欄更改爲myapp.com/s/#posts?author=martin的實例。請注意標記#。我們使用一個哈希查詢字符串。當然，你可以使用push state，但它還沒有被廣泛使用。