Search code examples
backbone.jsbackbone-routing

navigate route with querystring


Will Backbone.Router.navigate set test to true:

var test = false;

var Router = Backbone.Router.extend({
  routes: {
    'posts': 'showPosts'
  },
  showPosts: function () {
    test = true;
  }
});

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

router.navigate('posts?foo=3', {trigger: true});

assert.ok(test);

Eg, will posts?foo=3 fragment will match the posts route by default, or do I have to set another route for that, for example: posts?*querystring?

Thank you

PS: I know there exist the backbone-query-parameters but I want to know just for backbone.


Solution

  • You need to add another route with that expecting parameter :

    routes: {
        'posts?foo=:foo' : 'showPosts',
        'posts': 'showPosts'
    },
    showPosts: function (foo) {
        if(typeof foo != 'undefined'){
           // foo parameters was passed
        }
        test = true;
    }
    

    update
    You could define the general route to return all the query string and then parse it in the handler :

    routes: {
       'posts': 'showPosts',
       'posts?*queryString' : 'showPosts'
    },
    showPosts: function (queryString) {
        var params = parseQueryString(queryString);
        if(params.foo){
            // foo parameters was passed
        }
    }  
    ...
    // and the function that parses the query string can be something like : 
    function parseQueryString(queryString){
        var params = {};
        if(queryString){
            _.each(
                _.map(decodeURI(queryString).split(/&/g),function(el,i){
                    var aux = el.split('='), o = {};
                    if(aux.length >= 1){
                        var val = undefined;
                        if(aux.length == 2)
                            val = aux[1];
                        o[aux[0]] = val;
                    }
                    return o;
                }),
                function(o){
                    _.extend(params,o);
                }
            );
        }
        return params;
    }
    

    update 2

    Here's a live demo to see the code in action.