如何国际化咖啡脚本中的值答案

【问题标题】：How to internationalize values in coffee script如何国际化咖啡脚本中的值
【发布时间】：2012-08-20 08:34:12
【问题描述】：

以下代码是我在 rails 应用程序中的一个咖啡脚本文件中的内容。我正在努力为“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())

所有这些的目标是根据所选帐户过滤网络下拉列表。如果未选择帐户（帐户下拉菜单的值显示“选择一个”或相应的 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) 的翻译。

【问题讨论】：

如果 I18n.t("shared.select_account_first") 在你的 JavaScript 中工作，那为什么它不能在你的 CoffeeScript 中工作？
不确定，可能我应该在咖啡脚本中包含一些内容以访问外部函数。
你在哪里定义 I18n 以及你如何在你的 JavaScript 中使用它？
用更多信息更新了问题。如果有帮助，现在让我说。谢谢。
那么像在 JavaScript 中那样使用 I18n.t() 有什么问题呢？我建议您为 <option>s 使用与语言无关的值，并将特定于语言的部分保留为内容。

标签： ruby-on-rails-3 internationalization coffeescript

【解决方案1】：

我试图做同样的事情，但我认为你做不到，因为显然制作咖啡脚本的人做出了设计决定，禁止将 ruby 变量注入到咖啡脚本文件中，以避免不得不重新编译咖啡脚本每个请求 - 如果你问我，这有点无赖！一种可怕的方法是通过内联所需的翻译，但这听起来很可怕！

看看这个：How to access instance variables in CoffeeScript engine inside a Slim template

希望这会有所帮助！

【讨论】：

【解决方案2】：

只是想在这里插话，因为这是我在一些项目中必须定期做的事情。这不是很漂亮，但这是迄今为止我能想到的最好的解决方案。

使用上面的示例代码：

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 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>

这将为您提供您想要在咖啡脚本代码中访问的任何内容的翻译版本，可通过您正在使用的任何元素的数据属性访问。

就像我说的那样 - 它并不出色，但效果非常好，而且我经常使用它。

【讨论】：

【解决方案3】：

@mulus 的建议是有道理的，因为你想缩小你的 js 并缓存它；做.js.erb 不是最佳方式。

无论如何，这里有一个快速简便的方法：

我正在使用 Ruby on Rails，所以在我的应用程序布局中 (app/views/layouts/application.html.erb) 我有以下内容：

<head>
  ...
  <meta name='locale' content="<%= params[:locale] %>"><meta>
  ...
</head>

这将允许我在“运行时”将语言环境从 Ruby on Rails 传递给 Javascript。

然后我创建了一个 Translator.coffee 文件

class Translator
  @en = {
    internet_connection_lost: "You internet connection has been lost"
    bid_received: "Bid received. New balance $$bid_balance$$"
  }

  @ar = {
    internet_connection_lost: "ra7et el connection"
    bid_received: "Bid received. New balance $$bid_balance$$"
  }

  # you can place the variables above in here too
  # or you can have them in different files. Organize stuff as needed
  @get_translations: (locale) ->
    switch (locale)
      when 'en'
        @en
      when 'ar'
        @ar

  @translate: (val, interpolation) ->
    # get locale from meta
    locale = $("meta[name='locale']").attr("content") || "en"

    # get the translation for the val
    translation = Translator.get_translations(locale)[val]

    # substitute values
    for k,v of interpolation
      translation = translation.replace(k, v)

    return translation

window.Translator = Translator

像这样打电话给你的Translator：

message = Translator.translate("bid_received", { "$$bid_balance$$": "$10.00" })
console.log(message)

【讨论】：