在设置更新时更新自定义滑块

Question

我正在为 WPBakery Page Builder 插件创建自定义滑块元素，因为内置轮播不适合我的目的。

一切正常，除了当我更新元素设置时，滑块消失了，因为元素是在 DOM 中通过删除旧的 HTML 重新创建的。

元素代码如下：

<?php
class WPBakery_Custom_Slider {
    /**
     * Setup class
     */
    public function __construct() {
        // Actions.
        add_action( 'vc_before_init', array( $this, 'custom_mapping' ) );

        // Shortcodes.
        add_shortcode( 'wpbakery_custom_slider', array( $this, 'shortcode' ) );
    }

    /**
     * Custom Mapping
     */
    public function custom_mapping() {
        vc_map( array(
            'name'             => __( 'Custom Slider', 'text-domain' ),
            'base'             => 'wpbakery_custom_slider',
            'description'      => __( 'The Custom Slider.', 'text-domain' ),
            'category'         => __( 'Content', 'text-domain' ),
            'icon'             => 'icon-wpb-carousel',
            'front_enqueue_js' => get_theme_file_uri( 'assets/js/wpbakery-page-builder.js' ),
            'params'           => array(
                ...
            ),
        ) );
    }

    /**
     * The element HTML
     *
     * @param array $atts Shortcode attributes.
     * @return string
     */
    public function shortcode( $atts ) {
        // Params extraction.
        ...

        ob_start();
        ?>

        <div class="text-domain-wpb-custom-slider-wrapper">
            <div class="text-domain-wpb-custom-slider">
                ...
            </div>
        </div>

        <?php
        $html = ob_get_clean();

        return $html;
    }
}

这里是 wpbakery-page-builder.js 文件：

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    jQuery( document ).find( '.text-domain-wpb-custom-slider' ).customSlider();
} );

但是当活动运行时，.text-domain-wpb-custom-slider似乎不存在。我尝试的变体是：

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    jQuery( '.text-domain-wpb-custom-slider', document ).customSlider();
} );

和

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    setTimeout( function () {
        jQuery( '.text-domain-wpb-custom-slider', document ).customSlider();
    }, 1000 );
} );

以上所有，当保存元素的设置时结果：

Uncaught TypeError: jQuery(...).customSlider is not a function

因为 jQuery( '.text-domain-wpb-custom-slider', document ).length 为零，即使 DOM 中有 .text-domain-wpb-custom-slider。

关于如何为 WPBakery Page Builder/Visual Composer 正确更新基于 JavaScript 的自定义元素的任何想法？

Answer 1

问题是 document 变量的范围。指的是Builder编辑页面，不是需要编辑的页面（WPBakery称model）

所以这是解决方案，使用model.view.el而不是document来引用页面：

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    setTimeout( function () {
        jQuery( model.view.el ).find( '.text-domain-wpb-custom-slider' ).customSlider();
    }, 1000 );
} );

在设置更新时更新自定义滑块

Update Custom Slider on Settings Update

javascript

wordpress

jquery

visual-composer