CODEWITHSUNDEEP
javascriptjquerymodel-view-controllerbackbone.js
Alex
Alex

Reputation: 3790

Prepending/appending hash keys in javascript / backbone

I have a slight dilema. This isn't general to backbone.js but it's certainly causing me issues getting the Backbone.Router.routes working:

The problem: I have a bunch of hard coded routes in my js these follow a key value pair hash pattern like:

whatever.route : {"/url/goes/here":"functionNameHere"}

basically what this does is to bind a url to a function name to call when the URL is changed.

The problem I have is that I need to prepend the url with a lang/locale string so that the string would look like "/en/url/goes/here"

// this will always return "en" or "fr" or aany 2 letter language code    
var lang = window.location.pathname.split("/")[1].length ==2?window.location.pathname.split("/")[1]:false;


workspace = new Workspace( //Workspace is basically just a Backbone.router.extend Object
            {
                // the routes obj is basically a sequence of routes
                routes: {
                    "/":                    "home",
                    "/home":                "home",
                    "/terms":               "terms",
                    "/news":                "blog",
                    "/news/:title":         "blogpost",
                    "/about":               "about",
                    "/about/partners":      "partners",
                    "/about/people":        "people",
                    "/values/ethics":       "ethics",
                    "/values/innovation":   "innovation",
                    "/work":                "work",
                    "/work/process":        "process",
                    "/work/awards":         "awards",
                    "/work/:id":            "workdetail",
                    "/contact":             "contact",
                    "/contact/join":        "joinus",
                    "/contact/enquiries":   "enquiries"
                },
                lang : lang
            }
        );

my intial thought was along the lines of:

....routes{ lang+"/url/goes/here": "functionNameHere",
...

no dice errors next i try using :

....routes{ eval(lang+"/url/goes/here"): "functionNameHere", ...

no dice again..

surely theres a way to dynamically prepend the hash key on the fly?

Anyone?

Thanks very much

Solution Thanks to T.J. (see below)

If anyone is interested in this in a Backbone.js specific way. What I did was to use the solution T.J. suggested below on my initialize function like so:

Nice T.J.Crowder!!

not sure if I should edit the orig

initialize:  function(params){
        var tmpr = {};
        for(var i in params.routes)
        {
            tmpr[params.lang+i] = params.routes[i];
        }
        this.routes = tmpr;
......

Upvotes: 0

Views: 720

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074565

The part to the left of the : in an object literal must be a literal (either a token [e.g., without quotes] or a string literal [e.g., with quotes]). It cannot be an expression. So you can't do this in an object literal. Instead, you'll have to do this:

var routes = {};
routes[lang + "/url/goes/here"] = "functionNameHere";
// ...
workspace = new Workspace(
            {
                routes: routes,
                lang : lang
            }
        );

There, we're using the bracketed notation to assign properties to the routes object. When you use bracketed notation, you can use an expression to determine the property name. It's one of the cooler, and less-well-known, features of JavaScript that properties can be accessed either with dotted notation and a literal property name (obj.foo) or bracketed notation and a string property name (obj["foo"]). (In fact, that's what you're doing when you index into arrays — a[0] = 5; — because arrays aren't really arrays at all.)

Upvotes: 1

Related Questions