在 Assetic 资产中翻译 JavaScript 文字字符串的最佳方法是什么？答案

【问题标题】：What is the best way to translate JavaScript literal strings in Assetic assets?在 Assetic 资产中翻译 JavaScript 文字字符串的最佳方法是什么？
【发布时间】：2011-08-04 11:17:45
【问题描述】：

我正在使用 Symfony2 开发一个可翻译的应用程序。该应用程序启用了 Assetic 以缩小和合并 *.js 和 *.css 文件。但是，我编写了一个 jQuery 插件，其中包含文字字符串。例如，考虑以下代码：

       $('<p>Are you sure you want to proceed?</p>').dialog({
            buttons: {
                "Yes" : function() {
                    // ...
                },
                "No" : function() {
                    // ...
                }
            }
        });

在上面的 sn-p 中，"Are you sure..."、"Yes" 和 "No" 将始终是英文，我不能在 .js 文件中使用 Twig 模板来使用类似的东西来翻译它：{{ "yes"|trans }}

我想知道的是，使用 Twig 来利用内置 Symfony2 翻译机制来翻译我的 JS 脚本中的文字字符串的最佳方式是什么。

有没有办法创建例如：myscript.js.twig 文件？

【问题讨论】：

标签： symfony twig

【解决方案1】：

有没有办法创建例如：myscript.js.twig 文件？

这似乎是个坏主意。

您可以查看https://github.com/willdurand/BazingaExposeTranslationBundle

或自己创建，例如将其包含在您的模板中：

<script type="text/javascript">
    var translations = {
       // ... 
       'yes' : {{ 'yes' | trans }},
       // ...
    }
</script>

如果您的 javascript 文件包含在 </body> 之前，您可以在其中使用 translations 变量。

【讨论】：

你的两个想法都很完美！我想总是有不止一种方法可以给猫剥皮！ ;)
您应该用引号将{{ 'yes' | trans }} 括起来，否则会引发错误。
把你的翻译 yaml 转换成 json 转换器 ;)

【解决方案2】：

这是我的解决方案（在 Symfony 4 和 5 上测试）：

首先，我们创建一个控制器，它将根据当前变量语言环境创建包含所有翻译的 JS 文件：

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Yaml\Yaml;

/**
 * Translation controller.
 */
class TranslationController extends AbstractController
{
    /**
     * @Route("/translation.js", name="translation")
     */
    public function index(Request $request)
    {

        $locale = $request->getLocale();
        $file   = __DIR__.'/../../translations/messages.'.$locale.'.yaml';
        $parsed = Yaml::parse(file_get_contents($file));

        $translations = $this->renderView(
            'translation/translation.js.twig', 
            array(
                'json' => json_encode($parsed)
            )
        );

        return new Response($translations, 200,
            array('Content-Type' => 'text/javascript')
        );
    }
}

然后我们创建一个 TWIG 模板来渲染（/templates/translation/translation.js.twig）：

var trans = JSON.parse('{{ json|raw }}');

我们将动态翻译文件放在模板中其他资产之前：

<script src="{{ path('translation') }}"></script>

对于示例翻译文件/translations/messages.pl.yaml：

projects: Projekty
medium: Średnio
month:
  january: Styczeń
  february: Luty

我们可以在任何 JS 文件中显示我们的翻译：

console.log(trans['month']['january']);
console.log(trans['medium']);

希望对大家有用

【讨论】：

好主意！我按照你的逻辑做了，但我创建了一个 Twig 函数

【解决方案3】：

我正在向make twig.js work with translations 搜索一些东西，这在我看来是最好的解决方案。仍在寻找。

与此同时，我正在使用这个 jsgettext，它是 Joshua I. Miller 的 Javascript 中的 gettext 实现。由于原始仓库已关闭，我已上传回 github。

<script language="javascript" src="/path/LC_MESSAGES/myDomain.json"></script>
<script language="javascript" src="/path/Gettext.js"></script>

您将翻译文件加载到 DOM 中，jsgettext 可以解析它：

function _(msgid) { return gt.gettext(msgid); }

alert(_("some string"));

要从 Symfony 获取翻译文件的路径，您必须围绕 Translator 服务进行一些 php/twig 扩展，但它在不复制翻译资源的情况下效果很好。

【讨论】：