如何使Twig Globals在JavaScript库中可访问

Question

I am refactorizing one twig template, this included a HUGE amount of javascript functions which should be organized into a separate library to keep the structure away from the logic. 我正在重构一个树枝模板，其中包括大量的javascript函数，这些JavaScript函数应组织到一个单独的库中，以使结构远离逻辑。 So i moved them and linked the library like : 所以我搬了他们，并像这样链接了图书馆：

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

The problem here is that some of these libraries were using twig globals. 这里的问题是这些库中的某些库正在使用树枝全局变量。 Most of the functions work properly, but some others don't. 大多数功能正常工作，但其他一些则不能。

I've tried passing it through html code and recieving it through jquery (test1) which I couldnt make it work. 我试图通过html代码传递它，并通过jquery（test1）接收它，但我无法使其工作。 Then im trying to access it directly. 然后即时通讯试图直接访问它。

My template includes something like this: 我的模板包括以下内容：

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

external javascript 外部JavaScript

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

The output in the alerts was: 警报中的输出为：

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

Answer 1

I used a bad example above. 我在上面用了一个不好的例子。 I was using in my html something more like 我在我的html中使用了更多类似的东西

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

And so the js was : 因此，js是：

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

Which didn't work. 哪个没有用。 But the problem (camel case in names) couldn't be detected with the example i gave. 但是这个问题（名字中的驼峰大小写）无法通过我给出的示例检测到。 My apologies I noticed it after some rewording with data-test worked so i ended up with this in the html. 我很抱歉，在对数据测试进行了一些改写后发现了它，所以最终在html中找到了它。

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

And in my JS: 在我的JS中：

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

And THAT WORKS. 而且有效。 I am new to this place and i dont know if i should edit the original question. 我是这个地方的新手，我不知道是否应该编辑原始问题。 Any help for it also appreciated. 任何帮助，也表示赞赏。

EDIT: Using class(.) instead of id(#) will only capture the first html even if the attribute name is different. 编辑：使用class（。）而不是id（＃）将仅捕获第一个html，即使属性名称不同。 This means: 这意味着：

<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

You don't need to add extra html to pass your variables to twig as seen here 您无需添加额外的html即可将变量传递到树枝，如此处所示

twig file 树枝文件

<!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 functions.js

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

如何使Twig Globals在JavaScript库中可访问

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-01-24 08:23:44

解决方案2
1 2019-01-24 08:47:13

如何使Twig Globals在JavaScript库中可访问

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-01-24 08:23:44

解决方案2 1 2019-01-24 08:47:13

解决方案1
1 已采纳 2019-01-24 08:23:44

解决方案2
1 2019-01-24 08:47:13