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

Question

我有很多 javascript 代碼一個我的 twig 模板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>

但它不起作用，因為我有這么多 twig 變量，它們不再被識別。

對於每個 twig 變量，我都會收到一條錯誤消息，例如：

SyntaxError: expected property name, got '{'

Answer 1

首先（正如評論已經說過的），將 JavaScript 與 Twig 混合不是一個好主意。

• 使您的代碼難以維護、難以閱讀和難以理解
• 語法錯誤和 JavaScript 錯誤可能很容易發生
• 可能會弄亂 IDE 中的語法高亮顯示
• 等等

如何改善這種情況？ 顯然你有變量 output。 您可以在主文件中執行以下操作：

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