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()功能。