BackboneJS 没有创建包装器 div

Question

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

我四处搜索，但没有发现任何类似的问题。我对 Backbone 很陌生，所以我想我遗漏了一些东西。

注意： 我正在使用 WordPress 环境，这就是为什么有一个 wp 全局变量 wp.Backbone 是 [=16= 的内部改编] 以避免与 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' 并在初始化之后将视图附加到它。

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>

BackboneJS 没有创建包装器 div

BackboneJS not creating the Wrapper div

javascript

wordpress

jquery

backbone.js

在下面查找代码