javascript - BackboneJS 未创建 Wrapper div

Question

我正在创建一个简单的主干模板弹出窗口。 Backbone 未创建包装 <div>它应该创建的元素。生成模板时没有<div class="theme-overlay">被生成。 Backbone 从模板中转储 html，无需任何包装器。

我查了一下，但没有发现任何类似的问题。我对 Backbone 很陌生，所以我想我错过了一些东西。

注意:我正在使用 WordPress 环境，这就是为什么有 wp全局变量wp.Backbone是 Backbone 的内部改编以避免与 PHP 发生冲突。使用Backbone.View.extend()而不是wp.Backbone.View.extend()给了我同样的结果。

在下面查找代码

window.wp = window.wp || {};

(function($){
    var importer = {};
    importer.data = _kallzuDemoSettings;
    _.extend( importer, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });

    importer.View = wp.Backbone.View.extend({
        template: wp.template('demo'),
        el: '#theme-overlay',
        className: 'theme-overlay',
        events: {
            'click .close' : 'collapse'
        },
        render: function(demo_title){

            var data = _.find(importer.data.demos, function(item){
                return item.name == demo_title;
            });

            if( data == undefined ){
                alert( 'No data found!');
                return;
            }

            this.$el.html( this.template( data ) ); // insert into dom
        },
        collapse: function( event ) {

            var self = this;

            event = event || window.event;

            if ( $( event.target ).is( '.close' ) ) {

                // Add a temporary closing class while overlay fades out
                $( 'body' ).addClass( 'closing-overlay' );

                // With a quick fade out animation
                this.$el.fadeOut( 130, function() {
                    // Clicking outside the modal box closes the overlay
                    $( 'body' ).removeClass( 'closing-overlay' );
                    // Handle event cleanup
                    self.closeOverlay();
                });
            }

        },

        closeOverlay: function() {
            $( 'body' ).removeClass( 'modal-open' );
            this.remove();
            this.unbind();
            this.trigger( 'importer:collapse' );
        },
    });

    window.installDemo = function( demo_title ){
        var view = new importer.View();
        view.render( demo_title );
    }

})(jQuery);

我认为脚本的其他部分(例如模板)没有必要显示。但如果您需要它们，请在评论中告诉我。

Answer 1

您应该删除 el: '#theme-overlay' 并在初始化后将 View 附加到其中。

window.installDemo = function( demo_title ){
    var view = new importer.View();
    view.$el.appendTo('#theme-overlay')
    view.render( demo_title );
}

这样，您的包装器 div 将被创建，然后附加到该 div。

DOM 最终应该看起来像:

<div id="theme-overlay">
    <div class="theme-overlay"><!-- your rendered content --></div>
</div>