在 Javascript/Jquery 的 Twig 模板中添加翻译

Question

我正在处理表单验证，我想根据收到的错误显示不同的错误消息。我正在将 Silex 和 Twig 与 translator component 和 balloon.css 一起用于工具提示，到目前为止它有效。

现在我想根据我网站的语言翻译这个错误信息，但我很难做到我想做的。

这是我的代码：

我的表格

<form class="my-form col-12 col-md-5">
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="text" class="form-control color-light-grey" id="name" name="name" aria-describedby="name" placeholder="{{ 'input-name'|trans }}">
        </label>
        <small>www.mywebsite.com/<span id="input_name_content">______________</span></small>
    </div>
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="password" class="form-control color-light-grey" id="mdp" name="mdp" placeholder="{{ 'input-password'|trans }}">
        </label>
    </div>
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="password" class="form-control color-light-grey" id="confirm_mdp" name="confirm_mdp" placeholder="{{ 'input-confirm'|trans }}">
        </label>
    </div>
    <button id="create_new" type="button" class="btn bg-color-yellow hover-yellow-light">{{ 'create-pixers'|trans }}</button>
</form>

如你所见，我用{{ 'key'|trans }}翻译我的内容，没问题。

我的 JS

我有一个函数可以检查我的输入值并在遇到一个错误时创建一个错误，然后最后如果我的错误 obj 不为空，我会显示我的错误。我使用这个函数来完成它，它添加了一些 balloon.css 属性，所以我得到了我想要的东西：

function displayFormError(error) {
    $.each(error, function(key, msg) {
        $("input[name='"+key+"']").parent().parent().attr({
            "data-balloon-visible": "",
            "data-balloon-pos" : "up",
            "data-balloon" : msg
        });
        $("input[name='"+key+"']").parent().addClass("is-wrong").removeClass("is-valid");
    });
}

我的问题

当我在 HTML 中执行此操作时，它起作用了（我的工具提示带有空错误消息）：

<div class="form-group" data-balloon-visible data-balloon-pos="up" data-balloon="{{ 'empty'|trans }}">
    <label for="name" class="col-12">
        <input type="text" class="form-control color-light-grey" id="name" name="name" aria-describedby="name" placeholder="{{ 'input-name'|trans }}">
    </label>
</div>

但是当我将 displayFormError(error) 与 msg = "{{ 'empty'|trans }}" 一起使用时，它不起作用。

我知道这是因为我是用 JS 做的，但是是否可以将我想要的消息从我的 JS 添加到我的 Twig 模板？

我看到这个包可能对我有帮助，但如果可能的话，我想找到一个我可以自己做的解决方案：https://github.com/willdurand/BazingaJsTranslationBundle

Answer 1

不，不可能将变量从 Javascript 传递给 Twig(PHP)。

我会使用 https://github.com/willdurand/BazingaJsTranslationBundle 来避免在您的应用程序中使用 2 种不同的翻译系统。

这样您就可以将 javascript 和消息放在同一个文件中。

如果您真的想自己做，可以 re-invent 轮子：它只是一些文本被另一个替换。或者您可以找到 javascript 图书馆。

Answer 2

好吧，事实上我设法通过在 Twig Block 中添加我的 Javascript 来解决我的问题。

因此 script.js 中的这段代码将不起作用：

function displayFormError(error) {
    $.each(error, function(key, msg) {
        $("input[name='"+key+"']").parent().parent().attr({
            "data-balloon-visible": "",
            "data-balloon-pos" : "up",
            "data-balloon" : msg // msg = "{{ 'my-key'|trans }}"
        });
        $("input[name='"+key+"']").parent().addClass("is-wrong").removeClass("is-valid");
    });
}

但是，如果您将它添加到 "my_view.html.twig" 文件的 Twig 块中，它将：

{% block ADD_JS_CODE %}
<script type="text/javascript">
     $(document).ready(function() {

         function displayFormError(error) {
             // same code than before
         }

     });
</script>
{% endblock %}

这样我就可以使用我的功能来检查我的表单并根据页面中当前语言的错误添加消息，而无需任何其他组件，只需 Silex + Twig + Translator！

在 Javascript/Jquery 的 Twig 模板中添加翻译

Add translation in Twig template from Javascript/Jquery

javascript

jquery

twig

silex

balloon

我的表格

我的 JS

我的问题