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

Question

我有两个视图 - 一个OverlayView和一个StoryView。 StoryView需要附加到OverlayView（都是动态创建的）。我在OverlayView中动态创建#overlay div，但是当我将StoryView的'el'设置为#overlay时，StoryView的这个$ el是一个空数组。在StoryView创建时，#overlay div绝对存在于DOM中。

我该如何让StoryView识别yyanly创建的#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

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

工作示例here。