web-dev-qa-db-ja.com

Handlebars.js（口ひげテンプレート）でi18nを作成する方法は？

現在、Handbackbars.js（BackboneとjQueryに関連付けられています）を使用して、Webアプリをほぼ完全にクライアント側でレンダリングしていますが、このアプリの国際化に問題があります。

この作業を行うにはどうすればよいですか？

プラグインはありますか？

javascriptjqueryinternationalizationhandlebars.jsmustache
42
mdcarter

これは回答済みですが、簡単な解決策を共有したいと思います。 I18n.js（作業中のプロジェクトで使用）を使用してGazlerのソリューションを構築するために、非常にシンプルなHandlebarsヘルパーを使用して、その場でローカライズを行うプロセスを促進しました。

ハンドラー

Handlebars.registerHelper('I18n',
  function(str){
    return (I18n != undefined ? I18n.t(str) : str);
  }
);

テンプレート

<script id="my_template" type="x-handlebars-template">
    <div>{{I18n myVar}}</div>
</script>

これの主な利点は、jsonオブジェクト全体に高価なプリ/ポスト処理がないことです。入ってくるjsonにネストされたオブジェクト/配列がある場合は言うまでもありませんが、オブジェクトが巨大な場合、それらを探して解析するのに時間がかかる可能性があります。

乾杯！

83
poweratom

https://github.com/fnando/i18n-js はRuby config/localesフォルダーから国際化ファイルを作成するgemです。ただし、 Railsを使用していない場合、独自に使用されているJavaScriptを見つけることができます here 。

次に、ネストされたオブジェクトに翻訳を保存します。

I18n.translations = {"en":{"date":{"formats":{"default":"%Y-%m-%d","short":"%b %d","long":"%B %d, %Y"}}}};

私のプロジェクトで使用しているのは、@@ translation_key @@形式の文字列を自動的に変換する口ひげのパッチです。

i18nize = function (result) {
    if (I18n) {
      var toBeTranslated = result.match(/@@([^@]*)@@/gm);
      if (!toBeTranslated) return result;
      for(var i = 0; i < toBeTranslated.length; i++) {
        result = result.replace(toBeTranslated[i], I18n.t(toBeTranslated[i].replace(/@/g, "")));
      }
    }
    return result;
};

次に、i18nizeafterrenderを呼び出して、テンプレートに翻訳を渡すのではなく配置できるようにします。

標準の口ひげの実装にテンプレートを移植できないため、口ひげにパッチを当てることに注意してください。しかし、私の場合、提供される利点はこの問題を上回りました。

お役に立てれば。

5
Gazler

@poweratomの答えに基づいて：

ember.jsのみで、I18n.jsに渡されるオプションと同じです。

計算されたプロパティが使用されると、魔法のようにリロードされます。

Ember.Handlebars.helper "t", (str, options) ->
  if I18n? then I18n.t(str, options.hash) else str

テンプレート：

{{t 'sharings.index.title' count=length}}

Yml：

en:
  sharings:
    index:
      title: To listen (%{count})
4
jvenezia

質問には答えられますが、i8n libに依存せず、完全に自分のものを使いたくない場合があります。私は https://Gist.github.com/tracend/3261055 からインスピレーションを受けた独自のものを使用しています

1
Sahib Khan

WithNodeJs/Express：

  • node-i18n （Accept-Languageヘッダーを検出）

      app.use(i18n.init);

  • サンプル翻訳ファイル

    {   
 "hello": "hello",   
 "home-page": {
   "home": "Home",
    "signup": "Sign Up"  
 } 
}

  • Expressコントローラーで

    ...
data.tr = req.__('home-page');
var template = Handlebars.compile(source);
var result = template(data);

  • ハンドルバーテンプレート

        <li class="active"><a href="/">{{tr.home}}</a></li>
1
dam1

jSフレームワークを使用していない人のために http://i18next.com も有望に見えます

ハンドルバーヘルパーを作成して、次のような翻訳を呼び出すだけです http://i18next.com/pages/doc_templates.html

0
equivalent8