javascript - Backbone.js 视图事件未触发

Question

我一直在学习backbone.js，最后把一些代码放在一起。一切都在这里。

问题正是，我认为events. 他们没有触发click.

如何让它发挥作用？我错过了任何“陷阱”吗？

Answer 1

视图监听从它绑定到的 DOM 元素中出现的事件。

您还没有将视图绑定到任何元素。这意味着视图的元素是一个空的div，实际上并没有放在任何地方。所以事件永远不会到达视图。您需要做的是将视图绑定到一个元素，该元素可以听到来自按钮的事件。

所以设置视图el，使其也包含按钮，瞧！

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

Answer 2

您需要通过设置el属性来定义视图的容器，然后它会按预期工作。

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

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

Answer 3

为了获得额外的荣誉并使事情变得更有趣:-)，您实际上不需要明确定义elBackbone.View 来正确委派您的事件。以此为例：

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