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

Question

我的 twig 模板里有很多 javascript 代码 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 变量，而且它们不再被识别。

对于每一个 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文件中分离出来。