Wie erstellen Sie Backbone-Ansichten mit einem 'el', das dynamisch erstellt wurde?

Question

Ich habe zwei Ansichten - eine OverlayView und eine StoryView. Die StoryView muss an die OverlayView angehängt werden (beide werden dynamisch erstellt). Ich erstelle das #overlay div dynamisch in der OverlayView, aber wenn ich 'el' von StoryView auf #overlay setze, ist dies. $ El von StoryView ein leeres Array. Das #overlay-Div existiert definitiv im DOM, wenn das StoryView erstellt wird.

Wie bekomme ich das StoryView, um das dynamisch erstellte #overlay als sein 'el' zu erkennen? Stimmt die Annahme, dass das "el" der "übergeordnete" Container sein sollte, an den die Ansicht angehängt wird? Sollte das 'el' des OverlayView tatsächlich '#overlay' sein?

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

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

Ihr Problem ist, dass Ihr StoryViewel einfach ein Wähler sein sollte - nicht ein jQuery-Objekt. Das wird dazu führen, dass Backbone versucht, das Objekt (das noch nicht existiert) zu dem Zeitpunkt abzurufen, an dem Sie el angeben. Ändern Sie einfach el: $('#overlay') zu el: '#overlay'. Sie können auch das gleiche für $('body') in Ihrer ersten Ansicht tun, da es nicht notwendig ist. Verwenden Sie immer nur Selektoren anstelle von jQuery-Objekten und alles wird gut.

Arbeitsbeispiel here.