如何使用动态创建的"el"创建Backbone视图？

Question

我有两个视图 - OverlayView和StoryView.StoryView需要附加到OverlayView(两者都是动态创建的).我在OverlayView中动态创建了#overlay div,但是当我将StoryView的'el'设置为#overlay时,这个$.el的StoryView是一个空数组.在创建StoryView时,#rellay div肯定存在于DOM中.

如何让StoryView将dyanmically创建的#overlay识别为'el'？假设"el"应该是附加视图的"父"容器,我是否正确？OverlayView的'el'应该是'#overlay'吗？

OverlayView的:

OverlayView = Backbone.View.extend({
    el: $('body'),

    events: {
        'click #film': 'hideOverlay'
    },

    initialize: function() {
        this.render();
    },

    render: function() {
        this.$el.append('<div id="overlay"></div>');
        return this;
    }
});

StoryView:

var StoryView = Backbone.View.extend({
    el: $('#overlay'),

    events: {
        'click .close': 'closeStory'
    },

    initialize: function() {
        this.render();
    },

    render: function() {
        console.log(this.$el); // Returns empty array []
        return this;
    }
});

Answer 1

你的问题是你StoryView el应该只是一个选择器 - 而不是一个jQuery对象.这将导致Backbone在您指定时尝试检索对象(尚不存在)el.只需el: $('#overlay')改为el: '#overlay'.您也可以$('body')在第一个视图中执行相同的操作,因为这不是必需的.只是总是使用选择器而不是jQuery对象,你会没事的.

这里的工作示例.