Question

I’ve done some digging around the interweb but nothing’s making itself obvious.

I’m looking to integrate a custom CMS with backbone so that a page can be loaded either with a raw http request or via a switch in ‘state’ through backbone. The CMS currently is focussed on automating rewrite rules for it’s route/urls via htaccess/mod-rewrite however backbone uses a different formatting structure for it’s internal routes.

I would like it if the CMS could translate it’s rewrite rules into a the backbone format so that whenever a page is added to the CMS, backbone becomes aware of it and automatically updates itself. So for example the CMS outputs a load of page like this to a global SiteMap object:

....
"contact"       => array(
        "key"       =>      "contact",
        "url"       =>      "^(en|fr|de)/contact/$",
        "type"      =>      "page",
        "template"  =>      "contact",
        "method"    =>      "contact",
        "sitemap"   =>      TRUE,
        //other page config vars etc
    ),//..and so on
...

there is then a parser which which writes a rule to the .htaccess like so:

RewriteRule ^(en|fr|de)/contact$ index.php?page=contact&lang=$1&section=$2

QUESTION:

Obviously the backbone router format is a little different and would require quite a lot of translation work to be done in PHP in order to output a nice clean router config.
I can’t believe I’m the first person to come across something like this as it would seem that this is a necessary step in trying to integrate a Backbone app to a CMS. Can anyone point me in the direction of some method of translating these string formats? Perhaps I’m approaching this the wrong way?

Thanks very much indeed.

Answer 1

Backbone supports defining routes as regular expressions using the router.route method. Apache mod_rewrite rules are also regular expressions. As such, an expression such as ^(en|fr|de)/contact/$ is already a valid Backbone route.

You don’t say whether you already have a mechanism to getting the route configuration to the client, either via an “sitemap” service or by bootstrapping the data to the HTML page on the server. However, assuming you can output a sitemap object like this:

var sitemap = {
  "contact": {
    "url": "^(en|fr|de)/contact/$",
    "type": "page"
    //..other properties
   },
   //...other pages
}

You could register the routes by iterating the site map:

var CMSRouter = Backbone.Router.extend({
  page: function(pageName, language) {
      console.log(pageName); // -> "contact"
      console.log(language); // -> "en"
  }
});

var router = new CMSRouter();
_.each(sitemap, function(entry, key) {
    //handler method based on type ("page")
    var handler = router[entry.type];

    //create a pre-applied callback function where the first argument
    //is always set to the sitemap entry key ("contact"), and the
    //rest of the arguments are filled from the capturing groups from
    //the regular expression.
    var callback = _.bind(handler, router, key);

    //register route
    router.route(new RegExp(entry.route), callback);
});

Backbone.history.start();

This probably doesn’t take into account a lot of complexities of your system, but in principle it should work well. I’ll gladly edit the answer, if you can edit your question with more accurate requirements.