Как сделать глобалы веток доступными в библиотеке JavaScript - PullRequest
Новая
       12

Как сделать глобалы веток доступными в библиотеке JavaScript

0 голосов
/ 23 января 2019

Я занимаюсь рефакторизацией одного шаблона ветки, это включало ОГРОМНОЕ количество функций 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>

external javascript 

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

Вывод в предупреждениях был:

  1. test 1 => Undefined
  2. test 2 => {{twig_variable}}
  3. twig_variable => SUCCESS

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Вам не нужно добавлять дополнительный 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);
});
0 голосов
/ 24 января 2019

Я использовал плохой пример выше. Я использовал в своем HTML что-то более похожее на 

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

И вот js было: 

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

Что не сработало. Но проблема (случай верблюда в именах) не может быть обнаружена на примере, который я привел. Мои извенения Я заметил это после некоторой переписки с работающим data-test, поэтому я закончил с этим в html. 

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

А в моем JS: 

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

И ЭТО РАБОТАЕТ. Я новичок в этом месте, и я не знаю, если я должен отредактировать оригинальный вопрос. Любая помощь для этого также приветствуется.

РЕДАКТИРОВАТЬ: использование класса (.) Вместо 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
...