2012-08-07 49 views
5

我想为我的网站实现搜索功能。当用户将搜索项foobar键入input框并提交时,他将被重定向到http://mydomain.com/search?query=foobarBackbone.js应该从URL抓取GET参数吗?

问题::应该怎么抢我从URL GET参数query,并将其发送给后端,并得到结果的排列回为一个JSON响应?我应该这样做吗?

我目前的尝试下面甚至不会导致search函数被触发。

路由器

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     'search?query=:query': 'search' 
     // ... and some other routes 
    }, 

    search: function(query) { 
     this.photoList = new SearchCollection(); 
     var self = this; 
     this.photoList.fetch({ 
      data: {query: query}, 
      success: function() { 
       self.photoListView = new PhotoListView({ collection: self.photoList }); 
       self.photoListView.render(); 
      } 
     }); 
    } 

}); 

var app = new AppRouter(); 
Backbone.history.start({ 
    pushState: true, 
    root: '/' 
}); 

回答

5

已经有提起骨干就此问题的几个问题。有一个现有的插件,这个效果很好:

https://github.com/jhudson8/backbone-query-parameters

另外,我目前使用的匹配骨干路由匹配一个模拟API查询字符串参数。像这样

路线

"/api/v2/application/:query"

查询

application: function(query) { 
    var params = $.deparam(query.slice(1)); 
    // params.something... 
} 

东西至于手头你怎么重定向到index.html您的实际问题,以支持pushState

+0

用户可以去'domain.com','domain.com/something','domain.com/search'和路由器运行正确的函数来渲染元素在页面上。与页面上的链接/按钮/选项卡交互将'app.navigate()'到不同的URI段。这是否回答了重定向到index.html以支持'pushState'的问题? – Nyxynyx 2012-08-09 05:07:06

+0

不,不。我想知道你是如何为pushState设置服务器的,它不是自动的。您特别需要配置您的Web服务器来处理其他404的重定向到index.html。 – tbranyen 2012-08-12 16:11:44

+0

我在我的PHP框架中有一个路由器,用于在渲染包含backbone.js的页面之前检查路由是否有效。如果URL无效,那么PHP路由器将重定向到404。 – Nyxynyx 2012-08-12 16:43:34

-1

当您需要阅读URL并提取GET参数时,很少有这种情况。我认为你做错了事,这里是我的选择:

1)如果你的应用只有一个页面(单个应用页面),你可以显示结果,因为他们键入你的input字段或他们击中submit

2)如果你是将用户重定向到不同的页面,这意味着你可以bootstrap data从而使页面加载backbone后,将只需要渲染你的结果只会让其他的请求,如果你改变你的搜索词

3)你可以有一个javascript变量,它是在页面加载时直接初始化的m使用GET参数的服务器可能更容易

+5

除了那些允许应用程序的用户与其他人共享其状态的应用程序之外。 – tbranyen 2012-08-12 16:12:47

2

我打这个同样的问题,利用骨干查询参数考虑,但应该被普遍认为不正确的做法。

url查询字符串不适用于前端。当他们从page.html导航到page.html?something = something时,它们会被发送到服务器并强制刷新。

您应该使用散列片段代替。即http://www.example.com/ajax.html#key1=value1&key2=value2然后只是让这些值成为正常的主干方式,并从中建立您的请求参数。

https://github.com/jashkenas/backbone/issues/891https://developers.google.com/webmasters/ajax-crawling/docs/specificationhttp://tools.ietf.org/html/rfc3986#section-3.5