動的に作成された 'el'でバックボーンビューを作成するにはどうすればよいですか？

Question

私は、OverlayViewとStoryViewの2つのビューを持っています。 StoryViewをオーバーレイビューに追加する必要があります（両方とも動的に作成されます）。 OverlayViewで#overlay divを動的に作成しますが、StoryViewの 'el'を#overlayに設定すると、StoryViewの$ elは空の配列になります。 #overlay divは、StoryViewが作成されるまでにDOMに確実に存在します。

ダイナミックに作成された#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オブジェクト。これにより、elを指定した時点で、Backboneはオブジェクト（まだ存在しないオブジェクト）を取得しようとします。 el: $('#overlay')からel: '#overlay'に変更してください。必要ではないので、最初のビューで$('body')についても同じことを行うかもしれません。 jQueryオブジェクトの代わりにセレクタを使うだけで大丈夫です。

作業例here。