3

以下のコードは、Rails アプリケーションの coffeescript ファイルの 1 つにあるものです。「Select Account First」や「Select One」などの文字列値の i18n サポートを追加するのに苦労しています。通常の JavaScript ファイルでは、I18n.t("shared.select_account_first") のようなものを使用して、i18n-js gem を使用して文字列の国際化された値を取得しています。

jQuery ->
  networks = $('#account_offering_network_id').html()
  select_network_options = new Option("Select Account First", "", true, false)

  filter_networks_by_account = (account) ->
    if account is 'Select One'
      $('#account_offering_network_id').html(select_network_options)
    else
      escaped_account = account.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
      options = $(networks).filter("optgroup[label='#{escaped_account}']")
      $('#account_offering_network_id').html(options.html())

  # Show proper network dropdown first time
  filter_networks_by_account($('#account_offering_account_id :selected').text())

  # Show proper network dropdown on account change
  $('#account_offering_account_id').change -> filter_networks_by_account($('#account_offering_account_id :selected').text())

このすべての目的は、選択したアカウントに基づいてネットワーク ドロップダウンをフィルタリングすることです。アカウントが選択されていない場合 (アカウント ドロップダウンの値に [1 つ選択] または対応する i18n 値が表示される)、選択したロケールでネットワーク ドロップダウンに [最初にアカウントを選択] と表示されます。

i18s-js gem(https://github.com/fnando/i18n-js) を使用して、javascript での翻訳を有効にしています。以下は、gem をサポートするためにアプリケーションに加えなければならなかった変更です。

application.js で:

//= require i18n
//= require i18n/translations

production.rb と development.rb に追加されたプロパティ:

# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found)
config.i18n.fallbacks = true
config.i18n.available_locales = [:en, :ru]

application.html.erb で:

<%# For localization/i18n in javascript %>
<script type="text/javascript">
  I18n.defaultLocale = "<%= I18n.default_locale %>";
  I18n.locale = "<%= I18n.locale %>";
  I18n.fallbacks = true;
</script>

最後に、「rake i18n:js:export」を実行すると、名前と値のペアが読み込まれた翻訳ファイル (app/javascripts/i18n/translations.js) が作成されます。これで、任意の JavaScript から I18n.t(name) を使用して翻訳にアクセスできます。

4

3 に答える 3

0

私は同じことをしようとしていましたが、コーヒースクリプトを作成した人々が、リクエストごとにコーヒースクリプトを再コンパイルする必要を避けるために、ルビー変数をコーヒースクリプトファイルに注入することを禁止する設計上の決定を行ったようです-あなたが私に尋ねると、少し残念です！これを行う恐ろしい方法の 1 つは、必要な翻訳をインラインで渡すことですが、それは恐ろしいことです。

これを見てください: How to access instance variables in CoffeeScript engine inside a Slim template

お役に立てれば！

于 2013-06-01T11:01:00.307 に答える
0

これは私がいくつかのプロジェクトで定期的に行わなければならないことなので、ここでチャイムを鳴らしたいだけです. きれいではありませんが、これまでに思いついた最高のソリューションです。

上記のコード例を使用すると、次のようになります。

networks = $('#account_offering_network_id').html()
select_network_options = new Option("Select Account First", "", true, false)

HTML コードは次のようになっていると仮定します。

<select id="account_offering_network_id">
    ...you generate a list of stuff here...
</select>

しかし、あなたの本当の問題は、「Select Account First」というテキストを翻訳したいということです。だからここに私がすることがあります：

<select id="account_offering_network_id" data-default-option-text="Select Account First">
  ...you generate a list of stuff here...
</select>

次に、コーヒースクリプトには、すでにこれがあります：

networks = $('#account_offering_network_id').html()

翻訳された値 (コーヒー スクリプト ファイルではなく、HTML / ERB ファイルで定義した値) にアクセスするには、次のようにアクセスします。

networks = $('#account_offering_network_id').html()
default_text = $('#account_offering_network_id').attr('data-default-option-text');

もちろん、ERB ファイルでは、現在のロケールの翻訳が必要なため、ハードコーディングされた英語の翻訳を渡しません。したがって、実際の選択ボックスの定義は次のようになります。

<select id="account_offering_network_id" data-default-option-text="<%=I18n.t("views.default_select_text")%>">
  ...you generate a list of stuff here...
</select>

これにより、作業している要素のデータ属性を介してアクセス可能なコーヒースクリプトコードでアクセスしたいものの翻訳バージョンが取得されます。

私が言ったように、それは素晴らしいものではありませんが、非常にうまく機能し、定期的に使用しています.

于 2014-02-19T20:57:38.003 に答える