I am trying to implement a search function for my website. When the user types a search term foobar into a input box and submits it, he is redirected to .

Problem:: How should I grab the GET parameters query from the URL, and send it to the backend and get a array of results back as a JSON response? Should I even do it this way?

My current attempt below does not even cause the search function to be triggered.

Router

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: '/'
});

I am trying to implement a search function for my website. When the user types a search term foobar into a input box and submits it, he is redirected to http://mydomain./search?query=foobar.

Problem:: How should I grab the GET parameters query from the URL, and send it to the backend and get a array of results back as a JSON response? Should I even do it this way?

My current attempt below does not even cause the search function to be triggered.

Router

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: '/'
});

• javascript
• jquery
• backbone.js
• underscore.js

4 Answers 4

There have been several issues filed against Backbone for this very issue. There is an existing plugin that works well for this:

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

Alternatively, I'm currently using query string parameters in a mock API that matches Backbone's route matching. Looks something like this

Route

"/api/v2/application/:query"

Query

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

As to your actual issue at hand how are you redirecting to index.html to support pushState?

I hit this same issue and contemplated using backbone-query-parameters, but that should be considered generally an incorrect approach.

The url query string is not meant for the front end. They get sent to the server and force a refresh when navigating from page.html to page.html?something=something.

You should be using hash fragments instead. i.e. http://www.example./ajax.html#key1=value1&key2=value2 then just get those values the normal backbone way and build your request params from that.

See https://github./jashkenas/backbone/issues/891, https://developers.google./webmasters/ajax-crawling/docs/specification, https://www.rfc-editor/rfc/rfc3986#section-3.5

You can always read the URL via jQuery URL plugin. It works well.

https://github./allmarkedup/jQuery-URL-Parser

There are very few cases when you need to read the URL and extract the GET params. I think that you are doing things wrong and here are my options:

1) if you are having just one page in your app (single app page) you can display results as they type in your input field or after they hit submit

2) if you are redirecting the user to a different page that means you can bootstrap data so that after the page is loaded backbone will just have to render your results and only make other requests if you change your search word

3) you can have a javascript variable which is initialized on page load directly from the server where working with GET params is probably easier