Question

我一直在学习backbone.js并最终将一些代码放在一起。一切都在小提琴上here。

问题恰恰在于，我认为events。它们没有触发click上的视图功能。

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

Answer 1

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

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

所以设置视图的el，以便它也包含按钮和vo！

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

为了获得额外的荣誉并使事情变得更有趣:-)，您实际上并不需要为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()功能。

Backbone.js查看事件未触发

3 个答案: