8

次のようなかなりの URL を持つ、いくつか (ダース) のコンテンツ ページを表示する多言語 Web サイトがあります。

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

Pitchforkが行ったように、ページをまとめて完全な ajax ナビゲーションを提供したいと考えています。最も重要なことは、JavaScript 以外のクライアント (SEO、ソーシャル ネットワークなど) のページ ビューを維持することです。

サーバーは完全な Web ページを提供し、Backbone が初期化されると、他のページをプリフェッチして DOM に挿入し、ナビゲーションを高速化します。別のページに移動するときは、Backbone のビルトイン History 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();
}

i18n JS フレームワークを見てみましたが、一部の UI 要素ではなく、ページ コンテンツ全体を翻訳したいので、それは必要ないと思います。すべての翻訳部分はサーバー側で管理されます。

4

2 に答える 2

5

良い道を運転してくれた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")がなくなります。

于 2013-02-12T16:28:08.687 に答える
3

まず第一に、うまくいけば、ルーターをきれいに保つようにセットアップする方法です。

フランス語のコンテンツをプルする があります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'
});

それに付随するフィドルは次のとおりです。http://jsfiddle.net/dashk/yTS33/

さまざまなページのコンテンツを戦略化するという点で-説明した内容に基づいて（通常の特定の文字列ではなくすべてのコンテンツ）、単一の辞書がオプションになる可能性があります。ただし、Web サイトに言語を追加するときは、すべての言語を 1 つのファイルに入れるだけでなく、必要に応じて言語を動的にロードすることを検討することをお勧めします。

辞書のサンプルは次のとおりです。

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'
    }
};
于 2013-02-08T22:40:31.847 に答える