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

Question

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

countdown_controller.js

:

的刺激控制器

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.closed")

作为

messageValue

中

countdown_controller.js

的值，而不是直接写入字符串。我不知道该怎么做。

Answer 1

简单地将

countdown_controller.js

转换为

countdown_controller.js.erb

对我有用。然后我使用插值来注入

I18n.t("deals.status.closed")

，如下所示：

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

export default class extends Controller {

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

附注我最初收到错误，因为我将注释更改为使用以

#

开头的 ruby 语法，而不是以

//

开头的 JS 语法。

Answer 2

我所做的是将翻译作为 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));
  }
}