Question

I have a multiple language website that display several (a dozen) content pages, with pretty urls like this :

example.com              <- home for default language (french)
example.com/biographie   <- page 1
example.com/en           <- home for english language
example.com/en/biography <- page 1 english translation

I would like to merge pages together and provide full ajax navigation, pretty much like Pitchfork did. And the most important thing is to preserve non-javascript clients (SEO, social networks and others) page view.

The server is providing the complete webpage, and then when Backbone is initialize, it pre-fetches other pages and inject it into the DOM to speed up navigation. When I navigation to another page, I use Backbone builtin History API to record the new URL in the history and I change my view to display the requested page.

var Navigator = Backbone.Router.extend({

  routes: {
    "*page":                "showPage",
  },

  showPage: function(page) {
    this.pages[page].show();
  }

}

The issue I have is to manage i18n (I mean translated pages). How can I setup my router to deal with the language ? How should I handle language switch ?

routes: {
  "*page":                "showPageFr",
  "en/*page":             "showPageEn",
},

showPageFr: function(page){
  showPage(page, 'fr');
},

showPageEn: function(page){
  showPage(page, 'en');
},

showPage: function(page, lang) {
  // How should I manage 'lang' parameter here ?
  this.pages[page].show();
}

I had a look at i18n JS frameworks, but I don’t think I need that because I want to translate the entire page content, not some UI elements. All the translation part is managed server-side.

Answer 1

Thanks to DashK who drove my on the good road.
The solution is to change the History root when English language is detected.

var Router = Backbone.Router.extend({
    language: null,

    initialize: function(options){

        this.language = options.language;
        Backbone.history.start({pushState: true, root:'/'+ (this.language ? this.language : '')});
    },

    routes: {
        ":chapter(/*subpage)": "go",
        "" : "go" // match home route
    },

    go: function(chapter, subpage) {

    }
});

// wait for the document to be ready
$(function(){
    var lang;
    if($.url().segment(1) === 'en') { lang = 'en'; }

    new Router({language: lang});
});

Then, I do not have to care about the language when I use router.navigate("some-chapter") in my code.