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

Posted 2021-04-14

我正在进行表单验证，我想根据我得到的错误显示不同的错误消息。我使用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

答案

不，将您的变量从javascript传递给Twig（php）是不可能的。

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

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

如果你真的想自己做，你可以重新发明轮子：它只是一些文本被另一个文本替换。或者你可以找到一个JavaScript库。

另一答案

好吧，实际上我设法通过在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中添加它，它将：

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

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

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

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