将数据从Customize-Contros.js传递到Customize-preview.js

时间：2018-04-16 作者：Danny Cooper

这是从自定义控件传递数据的正确方法吗。js自定义预览。js？

( function( api ) {

api.controlConstructor[\'typography\'] = api.Control.extend( {
    ready: function() {
        var control = this;

        function addGoogleFont(fontName) {
                var font = control.params.ogf_fonts[fontName];
                var weights = $.map(font.variants, function(value, key) {
                  return key;
                });
                var weightsURL = weights.join(\',\');
                var fontURL = font.family.replace(\' \',\'+\') + \':\' + weightsURL;
                wp.customize.previewer.send( \'olympusFontURL\', "<link href=\'https://fonts.googleapis.com/css?family=" + fontURL + "\' rel=\'stylesheet\' type=\'text/css\'>" );
        }

        control.container.on( \'change\', \'.typography-font-family select\',
            function() {
                var value = jQuery( this ).val();
                control.settings[\'family\'].set( value );
                if( value != \'default\' ) {

                    addGoogleFont( value );

                    var font = control.params.ogf_fonts[value];
                    var weightsSelect = jQuery( \'.typography-font-weight select\' );
                    var newWeights = font.variants;
                    weightsSelect.empty();
                    $.each( newWeights, function( key, val ) {
                        weightsSelect.append( $( "<option></option>" )
                             .attr( "value", key ).text( val ) );
                    });
                }
            }
        );

    }
} );

} )( wp.customize );
这比试图.append() 直接在自定义控件中预览iframe。js？

这里是自定义预览。js适用于感兴趣的任何人：

jQuery( document ).ready( function() {

    wp.customize.bind( \'preview-ready\', function() {
      wp.customize.preview.bind( \'olympusFontURL\', function( url ) {
         console.log(url);
         $("head").append(url);
      } );
    } );

} ); // jQuery( document ).ready

1 个回复
最合适的回答,由SO网友:Weston Ruter 整理而成

Customizer Message Passing（自定义消息传递）下面是一些片段，它们显示了使消息传递握手正常工作所需的操作顺序。在示例代码中，控件将消息发送到change 因此，在总体ready 事件，应该可以。

窗格→ 预览

/* Pane, enqueue w/ customize-controls dependency at customize_controls_enqueue_scripts */
wp.customize.bind( \'ready\', function() {
  wp.customize.previewer.bind( \'ready\', function() {
     wp.customize.previewer.send( \'greeting\', \'Howdy, Preview!\' );
  } );
} );

/* Preview, enqueue /w customize-preview dependency at wp_enqueue_scripts if is_customize_preview() */
wp.customize.bind( \'preview-ready\', function() {
  wp.customize.preview.bind( \'greeting\', function( message ) {
     console.info( Pane sent message:\', message );
  } );
} );
预览→ 窗格
/* Preview, enqueue /w customize-preview dependency at wp_enqueue_scripts if is_customize_preview() */
wp.customize.bind( \'preview-ready\', function() {
  wp.customize.preview.bind( \'active\', function() {
     wp.customize.preview.send( \'greeting\', \'Howdy, Pane!\' );
  } );
} );

/* Pane, enqueue w/ customize-controls dependency at customize_controls_enqueue_scripts */
wp.customize.bind( \'ready\', function() {
  wp.customize.previewer.bind( \'greeting\', function( message ) {
     console.info( \'Preview sent greeting:\', message );
  } );
} );
建议，而不是添加change 的事件侦听器select 元素通过jQueryselect 元素应该与您所收听的设置相链接。所以你的ready 方法应该更像这样：

this.setting.bind( function( newFont ) {
    if ( \'default\' !== newFont ) {
        addGoogleFont( newFont );
    }
} );
但是这个addGoogleFont 正在通过整个link 除发送的设置更改外，还将标记到预览。把所有的addGoogleFont 预览本身的逻辑？例如：

wp.customize( fontSettingId, function( setting ) {
    setting.bind( function( newFont ) {
        if ( \'default\' !== newFont ) {
            addGoogleFont( newFont );
        }
    } );
} )
因此，您只需在预览中听取对字体设置的更改，然后构建link 要在预览中更新的标记。

结束
标签： theme-customizer   小码农  

相关推荐