如何在 backbone 中捕获点击事件

Question

我想捕捉按钮的（addnewItem）点击事件，但无法实现。以下代码有什么问题？

MyView = Backbone.View.extend({
    tagName: "table",
    render: function () {
        var rows = [];
        this.collection.each(function (row) {
            var rowView = new RowView({ model: row});
            rows.push(rowView.render().el);
        });
        this.$el.html(rows);
        $("#app-view").html("<h3>Items</h3><br/>").append(this.el).append("<br /><input type='button' class='btn btn-primary' value='Add new item' id='addNewItem' />");
        return this;
    },
    initialize: function () {
        this.listenTo(this.collection, "add", this.render);
    },
    events: {
        "click #addNewItem": "addNewItem"
    },
    addNewItem: function () {
        alert('Item added');
    }
});

Answer 1

如果事件源自视图的 el，视图只会以这种方式捕获事件。我可以从您的渲染方法中看到按钮在 el.

之外

如果它在您的 html 中有效，您只需将您的按钮包含在 el 中即可解决此问题（我认为这只是默认 div）。您的渲染方法现在可能以：

结尾

this.$el.html(rows).append("<br /><input type='button' class='btn btn-primary' value='Add new item' id='addNewItem' />");
$("#app-view").html("<h3>Items</h3><br/>").append(this.el);
return this;

另一种方法是以更传统的方式附加事件。在您的 initialize 方法中，您可以添加：

$("#app-view").on('click', '#addNewItem', this.addNewItem);

或者，如果 this 关键字在 addNewItem 方法中很重要，那么尝试：

$("#app-view").on('click', '#addNewItem', this.addNewItem.bind(this));

如何在 backbone 中捕获点击事件

How to catch click event in backbone

events

click

backbone.js