javascript - How to use Backbone.js to enhance a multi-language website navigation? - Stack Overflow

admin管理员组

文章数量:1352141

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

example              <- home for default language (french)
example/biographie   <- page 1
example/en           <- home for english language
example/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 plete 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.

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

example.              <- home for default language (french)
example./biographie   <- page 1
example./en           <- home for english language
example./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 plete 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.

• javascript
• backbone.js
• internationalization
• seo
• friendly-url

Share Improve this question Follow edited Feb 8, 2013 at 1:02 Fabien Quatravaux asked Feb 8, 2013 at 0:53 Fabien QuatravauxFabien Quatravaux 3,78622 gold badges2929 silver badges3535 bronze badges 5

• stackoverflow./questions/11865503/… – Hontoni Commented Feb 8, 2013 at 5:08
• 1 @Antonimo : I don't understand why this question is related to mine. I do not have a JSON file containing all the content translation, but I rather treat translated page as a different page (with different URL and different ID) – Fabien Quatravaux Commented Feb 8, 2013 at 11:03
• right, you want to pass the language (/fr/) to the server as attribute, stackoverflow./questions/7445353/…, may help – Hontoni Commented Feb 8, 2013 at 11:21
• @Antonimo : Nope, my issue is not on server side. I use Wordpress and have rewrite rules that manage the language just the way I need it. My issue is on the client. In fact, I think I will have to define a different root when I call Backbone.history.start : "/" for French and "/en/" for English. Do you think this could be a good solution ? – Fabien Quatravaux Commented Feb 8, 2013 at 14:12
• yep, I too needed a solution for this now, and found this is the way to do it. – Hontoni Commented Feb 23, 2013 at 16:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

First of all, this is how you can setup your router to keep it cleaner, hopefully.

You've the BaseRouter that will pull content for French, and if you want to add an additional language, you'll have to override the BaseRouter with a different language code. (See EnglishRouter)

// This is the base Router
var BaseRouter = Backbone.Router.extend({
    language: null,
    routes: {
        '*page': 'showPage'
    },

    _bindRoutes: function() {
        // this._bindRoutes() is called in Backbone.Router before
        // initialize(). Overriding native _bindRoutes method to
        // acodate the custom logic in changing route.
        var me = this;

        if (this.language) {
            console.log('Updating routes for ' + this.language);

            _.each(_.keys(this.routes), function(key) {
                me.routes[me.language + '/' + key] = me.routes[key];
                delete me.routes[key];
            });
        }

        // Call native _bindRoutes method.
        Backbone.Router.prototype._bindRoutes.apply(this, arguments);
    },

    getLanguage: function() {
        return this.language || 'fr';
    },

    showPage: function(page) {
        console.log('Showing ' + page + ' in ' + this.getLanguage());
    }
});

var EnglishRouter = BaseRouter.extend({
    language: 'en'
});

Here's the Fiddle that goes with it: http://jsfiddle/dashk/yTS33/

In terms of strategizing content for different pages - Based on what you described (All content instead of the normal specific-string,) a single dictionary could be an option. (I don't think it's elegant though.) As you add more languages to your website, however, you may want to consider dynamically loading the languages as needed instead of just putting all languages in a single file.

Here's a sample of the dictionary:

var PageContent = {
    'fr': {
        'happyPage': 'Happy Page Content in French',
        'fridayPage': 'Friday page Content in French'
    },
    'en': {
        'happyPage': 'Happy Page Content in English',
        'fridayPage': 'Friday page Content in English'
    }
};

本文标签： javascriptHow to use Backbonejs to enhance a multilanguage website navigationStack Overflow