如何使Twig Globals在JavaScript庫中可訪問

Question

我正在重構一個樹枝模板，其中包括大量的javascript函數，這些JavaScript函數應組織到一個單獨的庫中，以使結構遠離邏輯。 所以我搬了他們，並像這樣鏈接了圖書館：

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

這里的問題是這些庫中的某些庫正在使用樹枝全局變量。 大多數功能正常工作，但其他一些則不能。

我試圖通過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即可將變量傳遞到樹枝，如此處所示

樹枝文件

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

如何使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