14

アプリケーション全体で使用される静的文字列の変換に ember-i18n ライブラリを使用しています。言語ファイルはかなり大きいので、アプリケーションの起動時に可能なすべての言語辞書をロードしたくありません。したがって、ユーザーが言語を変更することを選択したときに、辞書を動的にロードしたいと考えています。かなりうまく機能する最初の実装を作成しました。

http://jsfiddle.net/cyclomarc/RYbNG/7/を参照

アプリを起動すると、英語で表示されます。ビューの 1 つ (About または Info) を選択できるようになり、これらも英語で表示されます。「オランダ語」をクリックすると、オランダ語辞書がロードされ、アプリケーションは正しい言語でインデックス ルートにリダイレクトされます。

新しい言語文字列は、ダミー ルートに移行してから目的のルートに戻る場合にのみ使用されるようです (私のサンプルでは、​​これは常に 'index' です)。

updateLanguage: function (lang) {
    var _self = this;
    //Load correct dictionary and transition to index route
    $.getScript("http://libraries.azurewebsites.net/locales/dictionary_" + lang + ".js", function () {
      CLDR.defaultLanguage = lang;
      _self.transitionToRoute('I18redirect');
    });
  }

App.I18redirectRoute = Ember.Route.extend({
  activate: function () {
    this.transitionTo('index');
  }
});

私の質問:

  1. これは、view.template をリロードする最良の方法ですか (ダミー ルートに移行してから、インデックスへの移行をアクティブ化します)?

  2. 言語の変更を要求したルートに戻る方法はありますか ( get(path) などで何かを使用する必要があります) ?

  3. また、赤い div (アプリケーション アウトレット) の「外側」にある文字列を翻訳したいと思います。index に戻りますが、その場合、アプリケーション テンプレートは再描画されません... 理由は何ですか?

  4. テンプレートから離れてからテンプレートを再入力すると、テンプレート自体がすべての言語文字列で再構築されるのは予想される動作ですか、それともその間に言語が変更された場合のみですか? このような新しい文字列を使用したテンプレートの再構築は、コンソール ログでどのように追跡できますか?

これを堅牢なスイッチング ソリューションにする他のアイデアはありますか?

4

3 に答える 3

0

ここにリストされているすべての方法を試しましたが、それらすべてにさまざまな問題がありました。これを機能させるためのはるかにエレガントなハックを見つけました。

警告: これは、Rails を使用して Ember を提供している場合にのみ機能します (ただし、サーバー側のフレームワークで動作するように適応できる可能性があります)。

Rails では、i18n-js gem が Rails のデフォルト ロケールと統合されます。I18n.locale が変更されたときに言語を更新するには、すべてのビューを手動で再描画するか、アプリをリセットする必要があるため、Ember での動的な切り替えは非常に面倒です。

私が見つけた最善の方法は、Ember が読み込まれる前に、Rails に設定されたパラメーターを使用してロケールを指定することです。

レール構成:

ember#index コントローラー アクションを次のようにします。

def index
  if params[:locale]
    I18n.locale = params[:locale]
  end
end

次に、HTML テンプレートに、次の 1 行の JavaScript を追加します。

<html>
  <head>
    <%= stylesheet_link_tag :application, :media => :all %>
    <%= stylesheet_link_tag    "application", 'http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,100,700' %>
    <%= stylesheet_link_tag    "application", 'http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic' %>
    <%= javascript_include_tag :application %>
    <title>Review Blaster 9000</title>

<!-- SET LOCALE USING RAILS PARAMETER PARSING -->
    <script>I18n.locale = '<%=I18n.locale%>';</script>
<!-- END SET LOCALE -->

  </head>
  <body>

<!-- Start Ember.js -->
      <%= yield %>
<!-- End Ember.js -->

  </body>
</html>

次に、テンプレートで、言語スイッチャーを次のように指定します。

<a href='/?locale=en'>English</a>
<a href='/?locale=es'>Spanish</a>
...etc...

これらのリンクをクリックすると、アプリが完全に更新されます。Rails はパラメーターを解析し、I18n を設定し、Ember は事前に設定された正しい値で開始するため、すべてが正しく描画されます。

于 2014-11-30T18:05:55.270 に答える
0

ビューのrerender()メソッドを利用できます。この方法では、ダミーの URL に切り替える必要はありません。

updateLanguage: function(lang) {

    //Send xhr to get a dictionary for corresponding language
    this.getDictionary(lang).then(successCb, failureCb);

    //If dictionary was retrieved, set translations property and 
    function successCb(response) {
        Ember.I18n.translations = response;
        $.each(Ember.View.views, function(index, view) {
          view.rerender();
        });
    };

    function failureCb(response) {
        console.error('Dictionary for this language is not available');
    };
}
于 2014-10-09T12:26:28.980 に答える