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对象，你会没事的。

工作示例here。

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

1 个答案: