如何在具有trick元素的外部文件中使用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>

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

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

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