如何使用 i18n 本地化 Stimulus JS 值？

Question

我正在开发 Rails 6 应用程序，我试图将所有显示的字符串存储在语言环境文件中。我有一个名为 countdown_controller.js 的 Stimulus 控制器：

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {

  static values = {
    message: { type: String, default: "Deal closed!" }
  }
}

en.yml：

en:
 deals:
   status:
     closed: "Deal closed!"

我想使用 I18n.t("deals.status.close") 作为 countdown_controller.js 中 messageValue 的值，而不是直接写入字符串。我不知道该怎么做。

Answer 1

我还发现很难使用 Stimulus 控制器实现本地化，直到我找到一个线程 - 对我的情况非常有帮助

# your config/locales/en.yml:

 en:
  deals:
   status:
    closed: "Deal closed!"


# app/views/layouts/application.html.erb (or any layout you're using)
...
<%= javascript_tag do %>
  window.I18n = <%= t("deals").to_json.html_safe %>
<% end %>
...


# in your Stimulus controller, you can simply call the translation for ex:


import { Controller } from "stimulus"

export default class extends Controller {    
  connect() {
    console.log(I18n.status.closed)
  }
}

Answer 2

只需将 countdown_controller.js 转换为 countdown_controller.js.erb 对我来说很有效。然后我使用插值来注入 I18n.t("deals.status.close") 如下：

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {

  static values = {
    message: { type: String, default: "<%= I18n.t('deals.status.closed') %>" }
  }
}

PS 当我将注释更改为使用以 # 而不是以 // 开头的 JS 语法。

Answer 3

我所做的是将翻译作为 Stimulus 控制器元素数据集的一部分发送，因此可以在 connect 上使用。就我而言，有多个，因此我从视图或助手发送一个哈希，如下所示：

localizations = {
  processing_images: :suggestions_processing_images.t,
  processing_image: :suggestions_processing_image.t,
  processing_results: :suggestions_processing_results.t,
  error: :suggestions_error.t
}.to_json

button_tag(:suggest_names.l,
           type: :button, 
           data: { localization: localizations,
                   controller: "suggestions",
                   action: "suggestions#suggestNames" })

// javascript/controllers/suggestions_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="suggestions"
export default class extends Controller {
  initialize() {
    this.localized_text = {}
  }
  connect() {
    Object.assign(this.localized_text,
      JSON.parse(this.element.dataset.localization));
  }
}