Backbone 事件处理程序不工作

Question

我有两个视图——一个是顶级布局视图，另一个是新表单视图，它充当布局的子视图并在其中呈现。我在表单视图中有一个事件处理程序，它应该根据输入的数据创建我的模型的一个新实例。

这是布局视图：

var LayoutView = Backbone.View.extend({
    el: "#layout",
    render: function (view) {
        this.child = view;
        if (this.child) {
            this.child.remove();
        }
        this.$el.html(this.child.render().el);
        return this;
    }
});

这是我的表单视图：

var ResumeForm = Backbone.View.extend({
    events: {
        'click #create': 'createResume'
    },
    initialize: function () {
        this.template = _.template($('#new-resume').html());
    },
    render: function () {
        this.$el.html(this.template());
        return this;
    },
    createResume: function () {
        // getting values from template inputs and saving them to model
        var resume = new Resume({
            profession: $('#profession').val(),
            firstName: $('#firstname').val(),
            lastName: $('#lastname').val()
        });
        // saving a new model to collection instance
        resumes.add(resume);
        resume.save(null, {
            success: function (res) {
                console.log("POST resume id " + res.toJSON().id);
            },
            error: function () {
                console.log("Failed to POST");
            }
        });
    }
});

我的表单视图在我的布局视图中完美呈现，但是当我输入值并单击 #create 按钮时，没有任何反应——既没有保存模型也没有记录我的 createResume 的任何错误错误方法。我怀疑在布局视图中呈现表单视图时，行 this.$el.html(this.child.render().el); 只会破坏所有事件侦听器，因为如果我将这些侦听器添加到布局视图，它会起作用。

有什么方法可以克服这个问题吗？

Answer 1

Backbone 的视图 remove 函数取消委托绑定到 el.

的事件

来自annotated source：

remove: function() {
    this._removeElement();
    this.stopListening();
    return this;
},

_removeElement: function() {
    this.$el.remove();
},

这与 jQuery .remove() 函数有关（强调我的）：

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

如果您在重用视图之前调用 remove，您需要手动调用 this.delegateEvents() 以重新绑定来自 events 哈希的事件并重新连接任何事件视图正在通过 this.listenTo(...).

收听

但是重用视图的最佳方法是不调用 remove 而调用 stopListening，您可以使用 setElement 取消委托事件，并将视图元素更改为传递元素，然后重新委托事件。

setElement: function(element) {
    this.undelegateEvents();
    this._setElement(element);
    this.delegateEvents();
    return this;
},

你的LayoutView会变成这样：

var LayoutView = Backbone.View.extend({
    el: "#layout",
    render: function(view) {
        // if the view is different, make sure to undelegate the old view.
        if (this.child && this.child !== view) this.child.undelegateEvents();
        this.child = view;
        this.child.setElement(this.$el).render();
        return this;
    }
});

Backbone 事件处理程序不工作

Backbone event handler doesn't work

javascript

jquery

backbone.js