如何使 javascript 库中的 twig 全局变量可访问

Question

我正在重构一个 twig 模板，其中包含大量 javascript 函数，这些函数应该组织到一个单独的库中，以使结构远离逻辑。所以我移动了它们并像这样链接了库：

<script type="text/javascript" src="../global/jscripts/jslibrarytest.js"></script>

这里的问题是其中一些库使用了 twig 全局变量。大部分功能正常，但有些功能不正常。

我试过通过 html 代码传递它并通过 jquery (test1) 接收它，但我无法让它工作。然后我尝试直接访问它。

我的模板包含如下内容：

<div id="twig-vars" data-test="{{ twig_variable }}"></div>
<script>
    $(".boton-excel").click(function() {
          $("#target_data").val(fooFunction);
          alert({{ twig_variable }});
    }); 
</script>

外部javascript

function fooFunction(){
   var test1= $('#twig-vars').data('test');//
   var test2= "{{ twig_variable }}";
   var test3= {{ twig_variable }};//syntax error
   alert(test1);
   alert(test2);
}

警报中的输出是：

测试 1 => 未定义
测试 2=> {{ twig_variable }}
twig_variable => 成功

Answer 1

我上面用了一个不好的例子。我在我的 html 中使用了更像

的东西

<div id="twig-vars" data-newRoute="{{ URL_Symfony_dev }}"></div>

因此 js 是：

var test= $('#twig-vars').data('newRoute');
alert(test);

这没有用。但是我给出的例子无法检测到问题（名称中的驼峰式）。我很抱歉在对数据测试进行了一些改写后我注意到了它，所以我在 html.

中得到了这个

<div id="twig-vars" data-newroute="{{ URL_Symfony_dev }}"></div>

在我的 JS 中：

var test= $('#twig-vars').data('newroute');
alert(test);

这很有效。我是这个地方的新手，我不知道是否应该编辑原始问题。任何帮助也很感激。

编辑：使用 class(.) 而不是 id(#) 只会捕获第一个 html，即使属性名称不同也是如此。这意味着：

<div **class**="twig-vars" data-**test1**="{{ URL_Symfony_dev }}"></div>
<div **class**="twig-vars" data-**test2**="{{ URL_Symfony_dev }}"></div>
<div **class**="twig-vars" data-**test3**="{{ URL_Symfony_dev }}"></div>

var test1= $('.twig-vars').data('test1');
var test2= $('.twig-vars').data('test2');
var test3= $('.twig-vars').data('test3');
alert(test1);//output-> correct result
alert(test2);//output-> undefined
alert(test3);//output-> undefined

Answer 2

您无需添加额外的 html 即可将您的变量传递给 twig，如此处所示

树枝文件

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
       <script>
           var my_route = {% if URL_Symfony_dev is defined %}'{{ URL_Symfony_dev }}'{% else %}null{% endif %}
       </script>
       <script src="scripts/functions.js"></script>
   </body>
</html>

functions.js

$(function() {
    alert('The route is '+my_route);
});

如何使 javascript 库中的 twig 全局变量可访问

How to make twig globals accessible in javascript library

javascript

include

twig