js文件中的eex语法或Phoenix代码

Question

我的 index.html.eex 中的内部标记我可以使用此语法来检索文本。

<%= gettext "Login failed!"%>

现在我有一个用于验证字段的 js 文件，我将此文件作为脚本加载到 index.html.eex。

一切正常，但我需要在 js 文件中使用 gettext 进行 Phoenix 文本翻译。我知道 <%= %> 语法不会在 .eex 文件之外编译，但是我拒绝将我所有的验证逻辑代码放在 index.html.eex 中我该怎么做才能在 js 文件中获取 phoenix 代码？

Answer 1

您可以将翻译存储在 index.html.eex 的变量中，然后从 JS 文件访问它。这是一个例子：

将此添加到 index.html.eex 的顶部：

<script>
  var Translations = {
    "login_failed": <%= raw Poison.encode!(gettext("Login failed!")) %>,
  };
</script>

现在在你的 JS 文件中，执行：

console.log(Translations.login_failed)

更好的方法是创建此类翻译的列表并将它们注入布局文件：

<script>
  var Translations = {
    "login_failed": <%= raw Poison.encode!(gettext("Login failed!")) %>,
    "some_other_error": <%= raw Poison.encode!(gettext("Some other error!")) %>,
  };
</script>

这样所有翻译都将在 app.js 中可用。

为什么 raw 和 Poison.encode!？

如果 thing 包含引号或换行符（可能还有一些其他特殊字符），则简单地执行 "<%= thing %>" 或 '<%= thing %>' 将会中断。 Poison.encode! 会将值转换为有效的 JSON （这也是有效的 JS）并且 raw 将确保该值不会被双重转义。

js文件中的eex语法或Phoenix代码

eex syntax or Phoenix code inside js file

javascript

gettext

elixir

phoenix-framework