バックボーンビュー：$エルは、次のように私はビューを定義している

Question

を期待どおりに動作しません：

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

問題があり、Hello Worldは私がthis.$elを使用して参照指定divで追加取得されていません。私がしなければ

代わりに、この（方法render()で）：

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

それが正常に動作します。 this.$elが$(".bookContainer")を参照していないのはなぜですか？

注：あなたがページにbookViewを挿入する必要があり

[div.bookContainer, context: div.bookContainer] 

Answer 1

を見つけることができますあなたはどのようにtagNameとclassName仕事を誤解。 fine manualから：

ELview.el
[...]
this.elはDOMセレクタ文字列または要素から分割することができます。それ以外の場合は、ビューのtagName,className,idおよびattributesプロパティから作成されます。

のでtagNameとclassNameプロパティは、elを作成DOMでそれを見つけることができませんに使用されています。既存の要素にビューをバインドしたい場合は、elを使用します。

el: '.bookContainer' 

Answer 2

：私はthis.$elを記録した場合、私は次のオブジェクトを取得します。

あなたがのHTML含まBackbone.Viewのインスタンス持っbookView = new app.BookView({});呼び出します。ただし、この要素はまだDOMに挿入されていない

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

を。あなたはまだそれを行う必要があります。例として：elへの参照がBackbone.Viewの要素である

bookView = new app.BookView({}); 

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

、これに関するドキュメントはhere