Symfony Collection Type字段JavaScript代码优化求助

我来帮你搞定这个重复代码的问题！核心思路是封装初始化逻辑+用通用选择器定位所有icon字段+监听动态添加的元素，这样不管是页面加载时的已有元素，还是后来新增的Collection条目，都能自动应用fontIconPicker配置。

第一步：给表单字段添加统一CSS类（可选但推荐） #

在你的buildForm方法里，给icon字段加上专属CSS类，让我们能精准定位目标元素：

public function buildForm(FormBuilderInterface $builder, array $options) {
    $builder 
        ->add('icon', TextType::class, array(
            'label' => 'Icon', 
            'empty_data' => 'icon',
            'label_attr' => array('style'=> ''),
            'attr' => array('class' => 'font-icon-picker') // 新增统一类名
        )) 
        // 其他字段保持不变
        ->add('title', TextType::class, array('label' => 'Title (English)', 'empty_data' => 'name','label_attr' => array('style'=> '') )) 
        ->add('title_th', TextType::class, array('label' => 'Title (Thai)', 'empty_data' => 'object','label_attr' => array('style'=> '') )) 
        ->add('distance', NumberType::class, array('label' => 'Distance (km)', 'empty_data' => '4','label_attr' => array('class'=> 'col-4') )) ;
}

第二步：优化JS代码，自动处理所有元素 #

替换你原来的重复JS代码，用下面这段更简洁的逻辑：

// 封装fontIconPicker初始化逻辑，避免重复配置
function initFontIconPickers() {
    // 选择所有目标输入框，逐个初始化
    $('.font-icon-picker').each(function() {
        // 跳过已初始化的元素，防止冲突
        if (!$(this).data('fip-initialized')) {
            $(this).fontIconPicker({
                source: ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icomoon-home2', 'icon-help'],
                emptyIcon: false,
                hasSearch: false,
                theme: 'fip-darkgrey'
            }).data('fip-initialized', true); // 标记为已初始化
        }
    });
}

// 页面加载完成后初始化现有字段
jQuery(document).ready(function($) {
    initFontIconPickers();

    // 方式1：监听Collection添加按钮点击（适配EasyAdmin默认按钮）
    $(document).on('click', 'a.ea-collection-add, .distance-collectionstyling a[data-action="add"]', function() {
        // 延迟等待DOM渲染完成后初始化新字段
        setTimeout(initFontIconPickers, 300);
    });

    // 方式2：用MutationObserver监听DOM变化（更可靠，覆盖所有动态添加场景）
    const collectionContainer = document.querySelector('.distance-collectionstyling');
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length) initFontIconPickers();
        });
    });
    observer.observe(collectionContainer, { childList: true, subtree: true });
});

代码关键优化点说明 #

1. 封装初始化函数：把fontIconPicker的配置逻辑统一放到initFontIconPickers里，避免重复写相同的配置参数。
2. 避免重复初始化：用data('fip-initialized')标记已处理的元素，防止多次调用插件导致的异常。
3. 通用选择器：通过.font-icon-picker类选择所有目标输入框，不再依赖硬编码的索引ID（比如_0_、_1_）。
4. 动态元素处理：
   • 点击监听：针对EasyAdmin的Collection添加按钮，延迟初始化新生成的字段。
   • MutationObserver：监听Collection容器的DOM变化，只要有新元素添加就自动初始化，比点击监听更可靠。

内容的提问来源于stack exchange，提问作者Missblues