如何在带有 twig 元素的外部文件中使用 javascript 代码？

Question

我的 twig 模板 home.html.twig 有很多 javascript 代码，例如：

$(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>

但它不起作用，因为我有太多的树枝变量，它们不再被识别了。

对于每个 twig 变量，我都会收到一条错误消息，例如：

SyntaxError: expected property name, got '{'

Answer 1

首先（如评论所述）将 JavaScript 与 Twig 混合使用不是一个好主意。

使您的代码难以维护、难以阅读和理解
语法错误和 JavaScript 错误很容易发生
可能会弄乱 IDE 中的语法高亮显示
等等

如何改善这种情况？显然你有变量输出。您可以在主文件中执行以下操作：

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

在 script.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 文件分开。

如何在带有 twig 元素的外部文件中使用 javascript 代码？

How can I use javascript code in an external file with twig elements?

javascript

php

symfony

twig