backbone.js - 如何使用动态创建的“el”创建主干视图？

Question

我有两个视图——一个 OverlayView 和一个 StoryView。StoryView 需要附加到 OverlayView（两者都是动态创建的）。我在 OverlayView 中动态创建了#overlay div，但是当我将 StoryView 的“el”设置为 #overlay 时，StoryView 的 this.$el 是一个空数组。在 StoryView 创建时，#overlay div 肯定存在于 DOM 中。

如何让 StoryView 将动态创建的#overlay 识别为它的“el”？我是否正确假设'el'应该是视图附加到的'父'容器？OverlayView 的“el”实际上应该是“#overlay”吗？

叠加视图：

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;
    }
});

故事视图：

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

这里的工作示例。