javascript - 骨干视图调用另一个视图 - 现在无法捕获点击事件

Question

我想我读到你可以让一个视图调用另一个视图，如下所示：

查看 1

window.View1 = Backbone.View.extend({

    initialize: function () {
        this.render();
    },

    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        "click .start" : "start"
    },

     start: function () {
       var StartView = new View2({model: this.model});
    }
})

查看 2

window.View2 = Backbone.View.extend({

    initialize: function () {
        this.render();
    },

    events: {
        "click .nextstage"   : "nextstage"
    },

    nextstage: function () {
     alert('NEXT STAGE COMING UP');
    },

    render: function () {
        $("#content").html(this.template(this.model.toJSON()));
        return this;
    }
});

所以路由器为我设置了视图一，我点击“开始”，它需要我查看 2。然后我想点击 Next Stage 并根据点击触发 View 2 Method .... 但它赢了不要开火。任何想法为什么？

Answer 1

View2呈现给#content并根据您的代码#content不是el视图的元素（）。由于events属性等待视图内部发生的事件，el因此它不起作用。

尝试

// View 1
start: function () {
    var StartView = new View2({model: this.model, el: $('#content')});
}

...

// View 2
render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}