如何在不使用Encore的情况下为Symfony项目引入jQuery
无需Webpack Encore引入jQuery处理CollectionType的方案
当然有,给你两个最直接的方案,完全不用碰Encore:
方案一:用CDN直接引入jQuery
直接在模板的</body>标签前插入CDN链接,就能快速用上jQuery,不用任何本地安装步骤:
{# 在你的base.html.twig或者目标表单模板里 #} <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> // 这里写处理CollectionType的自定义逻辑 $(document).ready(function() { // 示例:处理CollectionType的添加按钮 $('.add-item').click(function(e) { e.preventDefault(); var collectionHolder = $(this).closest('.collection-holder'); var prototype = collectionHolder.data('prototype'); var index = collectionHolder.data('index') || collectionHolder.children().length; var newForm = prototype.replace(/__name__/g, index); collectionHolder.append(newForm); collectionHolder.data('index', index + 1); // 给新添加的表单元素绑定删除事件 bindDeleteButtons(); }); // 绑定删除按钮事件 function bindDeleteButtons() { $('.delete-item').off('click').click(function(e) { e.preventDefault(); $(this).closest('.form-group').remove(); }); } // 初始化时绑定已有删除按钮 bindDeleteButtons(); }); </script>
注意:生产环境建议锁定jQuery版本号,避免意外更新导致兼容性问题。
方案二:本地引入jQuery文件
如果不想依赖CDN,直接下载jQuery文件放到项目里:
- 去jQuery官网下载压缩版的jQuery文件(比如
jquery-3.7.1.min.js) - 把文件放到项目的
public/js/目录下 - 在模板里用Symfony的Asset组件引用:
<script src="{{ asset('js/jquery-3.7.1.min.js') }}"></script> {# 同样后面跟上处理CollectionType的自定义脚本 #}
不管用哪种方案,只要确保jQuery在你的自定义脚本之前加载,就能正常处理CollectionType的动态添加/删除等逻辑。
内容的提问来源于stack exchange,提问作者ch3ssnut
相关产品推荐
相关产品推荐

