Backbone.js查看事件不會觸發

Question

我一直在學習backbone.js，並最終將一些代碼放在一起。一切都在小提琴here。

問題恰恰是，我認爲與events。他們沒有觸發click上的查看功能。

如何使它工作？我是否缺少任何「陷阱」？

Answer 1

您需要通過設置el屬性來定義視圖的容器，然後按預期工作。

Backbone.View.extend({ 
    el: "body", 
    events: { 
        "click #add-contact": "addContact", 
        "click #test": "alertMe" 
    }, 

更新小提琴：http://jsfiddle.net/fAB28/1/

Answer 2

意見聽取來自DOM元素，這勢必會出現的事件。

你還沒有將你的視圖綁定到任何元素。這意味着視圖的元素是一個空的div，它確實沒有放在任何地方。所以這些事件永遠無法達到這個觀點你需要做的是將視圖綁定到一個元素，該元素聽到來自按鈕的事件。

因此，設置視圖的el，以便它包含按鈕以及voilà！

http://jsfiddle.net/Vr8Q9/3/

Answer 3

對於額外的信貸，使事情變得更加有趣:-)，你實際上並不需要有一個明確的Backbone.View到正確的分配，你的事件定義el。藉此，例如：

MyView = Backbone.View.extend({ 
    // The events to delegate 
    events: { 
     'click #test':'onClick' 
    }, 
    initialize: function() { 
     // delegateEvents() actually happens in constructor, before render() 
     // At this point there is no #test 
    }, 
    render: function() { 
     // By default, el is an empty div 
     this.$el.html('<button id="test">testButton</button>'); 
     return this; 
    }, 
    onClick: function(event) { 
     console.log('clicked'); 
    } 
}); 

view = new MyView(); 
$('body').append(view.render().el); // We append this view to end of body 

在前面的代碼中，我們沒有（明確）定義el。要記住的最重要的事情不是你有明確的el。相反，這就是@jakee在這裏所說的：

視圖監聽從綁定到的DOM元素中出現的事件。

您在視圖中偵聽您傳入或定義在視圖內的事件哈希。無論是定義的el還是泛型div，它都會監聽其中的內容，並且由於它委託事件處理程序，處理程序將繼續指向this視圖。尼斯。

如果你做了這樣的事情：

$('#test').remove(); 
$('body').prepend('<button id="test">Second Test</button>'); 

我們發現，現在#TEST是我們的觀點（即在我們的身體的末尾追加通用EL之外點擊它...什麼都沒有。不過最酷的事情是這樣的。

$('#test').remove(); 
$('div:last').html('<button id="test">Third Test</button>'); 

有了這個代碼，我們刪除在機身頂部的#TEST並將其添加回視圖點擊它，會恢復它的onClick()功能。