Backbone Ausblick: $ el nicht wie erwartet funktioniert

Question

ich eine Ansicht definiert sich wie folgt:

var BookView = Backbone.View.extend({ 
    tagName: "div", 
    className: "bookContainer", 

    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     this.$el.html("Hello World"); // Problem is here 
     return this; 
    } 
}); 

var bookView = new app.BookView({}); 

Das Problem ist, Hello World ist nicht in der angegebenen div hinzugefügt zu werden, die ich this.$el mit Referenz.

Stattdessen, wenn ich dies tun (in render()-Methode):

$(".bookContainer").html("Hello World"); 

es funktioniert gut. Warum referenziert this.$el nicht auf $(".bookContainer")?

Hinweis: Wenn ich this.$el einzuloggen, werde ich Objekt folgende:

[div.bookContainer, context: div.bookContainer] 

Answer 1

Sie mißverstehen tagName und className, wie die Arbeit zu finden. Von der fine manual:

elview.el
[...]
this.el kann aus einem DOM Selektor-String oder ein Element gelöst werden; Ansonsten wird es aus den Eigenschaften tagName, className, id und attributes der Ansicht erstellt.

So ist die tagName und className Eigenschaften werden verwendet schaffen die el, ist es nicht in dem DOM finden. Wenn Sie die Ansicht auf ein vorhandenes Element binden möchten, verwenden Sie el:

el: '.bookContainer' 

Answer 2

Sie müssen bookView in die Seite einzufügen.

Wenn Sie anrufen bookView = new app.BookView({}); Sie haben eine Instanz eines Backbone.View, die den HTML-Code enthält:

<div class="bookContainer"> 
    Hello World 
</div> 

Allerdings hat dieses Element noch nicht in das DOM eingefügt. Du musst das immer noch tun. Als Beispiel:

bookView = new app.BookView({}); 

// put the bookview element into the dom 
$('body').html(bookView.el); 

Der Verweis auf el ist das Element der Backbone.View, Dokumentation hierfür kann here