骨幹事件沒有發射，沒有任何錯誤和元素存在

Question

模板：

<div class="view"> 
    <input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> /> 
    <label><%= title %></label> 
    <button class="destroy"></button> 
</div> 
<input class="edit" value="<%= title %>" /> 

查看：

var TodoView = Backbone.View.extend({ 
    tagName: 'li', 

    todoTpl: _.template($('#item-template').html()), 

    events: { 
    'dblclick label': 'edit', 
    'keypress .edit': 'updateOnEnter', 
    'blur .edit': 'close' 
    }, 

    initialize: function() { 
    console.log('Todo View initialized!'); 
    this.$el = $('#todo'); 
    console.log(this.$el); 
    this.render(); 
    }, 

    render: function() { 
    console.log('Todo View render started...'); 
    console.log(this.model.attributes); 
    this.$el.html(this.todoTpl(this.model.attributes)); 
    }, 

    edit: function() {console.log('edit called!');}, 

    close: function() {console.log('close called!');}, 

    updateOnEnter: function(e) { 
    console.log(e); 
    } 
}); 

並無事件在頁面加載時，我能看到渲染模板。但是，如果我雙擊label，按下input或模糊其他輸入，則什麼都不會發生。我期待在控制檯中看到日誌。我究竟做錯了什麼？

Answer 1

你失去了你的事件綁定，當你：

this.$el = $('#todo'); 

你不應該直接分配給$el或el屬性，你應該叫setElement代替：

setElementview.setElement(element)

如果您想將骨幹視圖應用於dif不同的DOM元素，使用setElement，它也將創建緩存的$el引用並將視圖的委託事件從舊元素移動到新元素。

另外，如果你將要改變視圖的el那麼就沒有必要了tagName屬性。當你創建視圖你也可以指定el：

new TodoView({ el: '#todo' }); 
new TodoView({ el: $('#todo') }); 

如果您#todo實際上是<ul>或<ol>然後：

1. 獨自離開tagName。
2. 通過致電append而不是致電setElement添加視圖的el到$('#todo')。

如果是這種情況，那麼你的代碼看起來更象這樣：

var TodoView = Backbone.View.extend({ 
    tagName: 'li', 
    //... 
    initialize: function() { 
    console.log('Todo View initialized!'); 
    this.render(); 
    }, 
    //... 
}); 

// And then where you create the view... 
var v = new TodoView(...); 
$('#todo').append(v.el); 

Answer 2

所以我能夠加入el到傳遞到Backbone.View的屬性來解決這個問題：

var TodoView = Backbone.View.extend({ 
    tagName: 'li', 

    // ... 
    el: $('#todo') 
    // .. 
});