如何使用Backbone.js来增强多语言网站导航

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

本文关键字：语言 网站导航 增强 何使用 Backbone js      更新时间：2023-09-26

我有一个多语言网站，可以显示几个（十几个）内容页面，其中有这样漂亮的URL：

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

我想将页面合并在一起，并提供完整的ajax导航，就像Pitchfork所做的那样。最重要的是保留非javascript客户端（SEO、社交网络和其他）的页面视图。

服务器提供完整的网页，然后当Backbone初始化时，它会预取其他页面并将其注入DOM以加快导航速度。当我导航到另一个页面时，我使用Backbone内置历史API来记录历史中的新URL，并更改视图以显示请求的页面。

var Navigator = Backbone.Router.extend({
  routes: {
    "*page":                "showPage",
  },
  showPage: function(page) {
    this.pages[page].show();
  }
}

我的问题是管理i18n（我指的是翻译的页面）。我如何设置我的路由器来处理语言？我应该如何处理语言转换？

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();
}

我看过i18nJS框架，但我认为我不需要它，因为我想翻译整个页面内容，而不是一些UI元素。所有翻译部分都由服务器端管理。

感谢DashK把我的车开上了好路。解决方案是在检测到英语时更改历史根。

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});
});

然后，当我在代码中使用router.navigate("some-chapter")时，我不必关心语言。

首先，这就是如何设置路由器以保持其清洁的方法。

您有BaseRouter，它将提取法语内容，如果您想添加其他语言，则必须使用不同的语言代码覆盖BaseRouter。（参见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
        // accomodate 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'
});

下面是Fiddle：http://jsfiddle.net/dashk/yTS33/

在为不同页面制定内容策略方面——根据您所描述的内容（所有内容而不是普通的特定字符串），可以选择一本词典。（不过，我认为这并不优雅。）然而，当你在网站上添加更多语言时，你可能需要考虑根据需要动态加载语言，而不是只将所有语言放在一个文件中。

这是字典的样本：

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'
    }
};
相关文章：