symfony collection 类型添加 javascript 函数到 collection 字段

Question

我在 collection 字段中添加了一些 javascript。但是我不知道如何在不加倍的情况下以好的方式编写 javascript，所以每个新的或现有的字段都包含这个 javascript。

提前致谢:)

我现在用这个：

$('a').on('click', function() {
        setTimeout( function () {
        $('#property_propertydistances_0_icon').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icomoon-home2'],
            emptyIcon: false,
            hasSearch: false
        });
            } , 300 );
});

    jQuery(document).ready(function($) {
        $('#property_propertydistances_0_icon').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
            emptyIcon: false,
            hasSearch: false
        });
    });

$('a').on('click', function() {
        setTimeout( function () {
        $('#property_propertydistances_1_icon').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icomoon-home2'],
            emptyIcon: false,
            hasSearch: false
        });
            } , 300 );
});

    jQuery(document).ready(function($) {
        $('#property_propertydistances_1_icon').fontIconPicker({
            source: fnt_icons_2,
            theme: 'fip-darkgrey'
        });
    });

我使用 easyadmin 对字段进行调整，只能通过 formbuilder 和 js 代码完成。

public 函数 buildForm(FormBuilderInterface $builder, array $options)

{

$builder

    ->add('icon', TextType::class, array('label' => 'Icon', 'empty_data' => 'icon','label_attr' => array('style'=> '') ))

    ->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 en css 文件，文本文件被 jquery 函数覆盖。我使用 https://fonticonpicker.github.io/

这是我的 easyadminyaml 代码部分

                - { property: 'propertydistances', css_class: 'propertydistancejava distance-collectionstyling',  id: 'testid1', type: 'collection', type_options: { entry_type: 'App\Form\DistanceType', by_reference: false,  attr: { name: 'testname2', id: 'testid2'} }}

Answer 1

在您的 $builder 中，将类添加到您的字段中。然后，在您的 javascript 中，迭代您的类以添加 JavaScript 代码。例如：

    $builder
        ->add('distance', TextType::class, [
            'attr' => ['class' => 'property-js'],
        ])
        ->add('image', TextType::class, [
            'attr' => ['class' => 'property-js'],
        ])

    jQuery(document).ready(function($) {
        $('.property-js').each(function(elem) {
            elem.fontIconPicker({
               source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
               emptyIcon: false,
               hasSearch: false
            });
        });
    });

symfony collection 类型添加 javascript 函数到 collection 字段

symfony collection type add javascript functions to collection fields

jquery

symfony

symfony4

easyadmin