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

Question

我正在进行表单验证，我希望根据我得到的错误显示不同的错误消息。我使用builder.RegisterType<MyDbContext>() .As<IMyDbContext>() .InstancePerOwned<AuditService>() .InstancePerRequest(); 和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> 翻译我的内容，这没关系。

我的JS

我有一个函数检查我的输入值并在遇到一个时创建一个错误，然后在最后如果我的错误obj不为空我显示我的错误。我使用这个函数来做它，它添加了一些{{ 'key'|trans }}属性，所以我有我想要的东西：

balloon.css

我的问题

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

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");
    });
}

但是，当<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)一起使用时，它无效。

我知道这是因为我在JS中这样做，但是可以将我的消息从我的JS添加到我的Twig模板吗？

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

Answer 1

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

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

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

如果你真的想自己做，你可以重新发明轮子：它只是一些文本被另一个文本替换。或者你可以找到一个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中添加它，它将：

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

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

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

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