Как я могу использовать код javascript во внешнем файле с элементами ветки?

Question

У меня много javascript кода один шаблон моей ветки home.html.twig, например:

$(document).ready(function () {

  var table = $('.datatable').DataTable({
        "responsive": true,
        {% if output.json == true %}
          "serverSide": true,
          "ajax": {
          "url": '{{ path('json', { 'fileName': output.fileName, 'length': output.page.pagelength|default(10), 'start':output.page.pagination|default(0)  }) }}',
          "data": { }
            },
        {% else %}
          "data":{{ output.data|raw }},
        {% endif %}
   });
});

Поскольку исходный код моей главной страницы теперь полон javascript Я пытаюсь переместите его во внешний файл, чтобы иметь более чистый вид:

<script src="{{ absolute_url(asset('js/script.js')) }}"></script>

Но это не работает, потому что у меня так много переменных веток, и они больше не распознаются.

Для Каждую переменную ветки я получаю сообщение об ошибке, например, это:

SyntaxError: expected property name, got '{'

Answer 1

Прежде всего (как уже сказано в комментариях) смешивать JavaScript с Twig не очень хорошая идея.

• Делает ваш код трудным для сопровождения, трудным для чтения и трудным для понимания
• Синтаксические ошибки и JavaScript ошибки могут произойти довольно легко
• Возможно, неправильно работает подсветка синтаксиса в IDE
• et c.

Как улучшить эту ситуацию? Очевидно, у вас есть переменная вывода. Вы можете сделать следующее в своем основном файле:

var output = {{ output|json_encode() }};

Внутри скрипта. js Вы можете сделать что-то вроде:

$(document).ready(function () {

 let options = { "repsonsive": true };

 if(output.json === true) {
   options.serverSide = true;
   options.ajax = { ... }
 } else {
   options.data = output.data
 }
  var table = $('.datatable').DataTable(options);
});

Используйте этот процесс рефакторинга также для очистки и реструктуризации ваш код и особенно держите JavaScript и CSS отдельно от файлов Twig настолько хорошо, насколько это возможно.