如何在 Backbone.js 网中捕获点击事件

niwlg2el  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(146)

我想捕获按钮的(addnewItem)click事件,但无法实现。下面的代码有什么问题?

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');
    }
});
x7rlezfr

x7rlezfr1#

如果事件源自视图的el内部,则视图仅以这种方式捕获事件。我可以从您的render方法中看到按钮位于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));

相关问题