How can I pass query string to backbone.js routing

Question

I'm using Backbone.js and jQuery-mobile. jQuery-mobile routing is disabled and I'm using the lib only for UI. I got everything working, except selecting page transition. I need to pass the page transition ('slice-up', 'fade', 'slide-down') to the Backbone router because the transition is varying based on where the user comes from.

I have figured a very ugly way to do it, to pass them via the url:

class App.Routers.Foods extends Backbone.Router
  routes:
    '': 'index'
    ':transition': 'index'
    'foods/new': 'new'
    'foods/new/:transition': 'new'

  initialize: ->
    @collection = new App.Collections.Foods()
    @collection.fetch()

  index: (transition)->
    view = new App.Views.FoodIndex(collection: @collection)
    App.changePage(view, transition)

  new: (transition)->
    view = new App.Views.FoodNew(collection: @collection)
    App.changePage(view, transition)

Here is the html link for default transition:

<a href="#" data-icon="back" class="ui-btn-left">Back</a>

Here is the html link for fade transition:

<a href="#fade" data-icon="back" class="ui-btn-left">Back</a>

Using the query string, i.e. /food/new?transition='fade' is definitely better but I don't know how to define the backbone routing to use query string variables.

How should I do this?

Is there a more elegant way to handle my problem, i.e. passing the variable not using the url at all?

score 12 · Accepted Answer · edited May 23 '17 at 11:51

12

You will have to manually parse the URL parameter inside the router functions.

class App.Routers.Foods extends Backbone.Router
  routes:
    '': 'index'
    'foods/new': 'new'

  initialize: ->
    @collection = new App.Collections.Foods()
    @collection.fetch()

  index: ()->
    view = new App.Views.FoodIndex(collection: @collection)
    App.changePage(view, getQueryVariable('transition'))

  new: ()->
    view = new App.Views.FoodNew(collection: @collection)
    App.changePage(view, getQueryVariable('transition'))

JS function to parse query params.

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return unescape(pair[1]);
        }
    }
    return false;
}

You will of course have to convert the JS function to CS but you get the idea.

edited May 23 '17 at 11:51

Community

1
1

answered Apr 01 '12 at 21:00

abraham

41,605
9
84
134

7

`unescape` in 2012? I'd recommend leaving `escape` and `unescape` in dustbin of history, `encodeURIComponent` and [`decodeURIComponent`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/decodeURIComponent) are usually what you want to use. – mu is too short Apr 01 '12 at 21:23
1

The is one problem. The routes won't match url containing query strings. A regular expression should be used to define routes that allow query string. – PreslavLe Apr 04 '12 at 19:45
6

I found this backbone plugin which does exactly what I need! https://github.com/jhudson8/backbone-query-parameters – PreslavLe Apr 04 '12 at 20:11

How can I pass query string to backbone.js routing

1 Answers1

Linked