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

我的 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 '{'

解决方案:

首先(正如评论中所说)将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文件中分离出来。

给TA打赏
共{{data.count}}人
人已打赏
未分类

试图让Minecraft(以下教程)的代码无法工作[关闭] 。

2022-9-10 22:33:28

未分类

如何在django中插入一张表并更新另一张表?

2022-9-10 22:33:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索