爲什麼這個$ el在我的骨幹視圖中工作？

Question

我對骨幹問題最大的問題是，我似乎從未掌握「el」是如何工作的。我覺得我真的知道它應該如何工作，但似乎總是給我帶來麻煩。

這是爲什麼。$ el在此codepen示例中未定義？

http://codepen.io/anon/pen/gPdyvj?editors=0010

的HTML：

<div class="wrapper"> 
    <div class="todo-container"> 
    <h1>To Do List</h1> 
    <input type="text" class="new-todo-box"> 
    <button class="test">test</button> 
    <div class="todo-list"> 

    </div> 
    </div> 
</div> 

的JavaScript

var TodoView = Backbone.Collection.extend({ 
    el: '.todo-container', 
    events: { 
     'click .test': 'handleEnter' 
    }, 
    handleEnter: function(){ 
     console.log("hello world test. ") 
    }, 

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

    render: function(){ 
     console.log("hello") 

     //this.$el is undefined 
     console.log(this.$el) 

     //so this does not work. 
     this.$el.html("testing $el") 


    } 

    }); 

$(document).ready(function(){ 
    new TodoView(); 
}); 

因爲我定義什麼EL元件使用類的名字，我不明白這一點。我很確定我過去曾經這樣使用過它。我覺得我永遠不知道el何時能夠正常工作。事件也沒有解僱，我認爲這與el沒有正確設置有關。

Answer 1

這裏的問題：

var TodoView = Backbone.Collection.extend({ // }); 

您正試圖使從集合延伸的「查看」，並收集不具備的屬性$ EL，而不是說，你必須做到：

var TodoView = Backbone.View.extend({ // });