Question

我的Backbone.js应用程序有一个弹出编辑器视图，当用户进行更改时，该视图将被重复关闭并重新打开。我正在试图找出实现这一目标的最简洁方法，而且我仍然坚持事件委托问题。

我认为问题在于我在render方法中应用模板的方式。我没有在其他视图中触发事件的任何问题，但这些观点不同，因为他们有一个模型。我遇到问题的视图更多的是包含子视图的应用程序视图，所以我不确定如何将视图的上下文传递给MyApp视图。

这是我的代码：

MyApp = Backbone.View.extend({
    tagName: 'div',
    template: _.template($('#app-template').html()),

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

    render: function() {
      $('#container').html(this.template);
      return this;
    },

    events: {
      "click .save" : "onSaveClicked"
    },

    onSaveClicked: function () {
        console.log("Save clicked.");
        this.$el.remove();
    }
});

$('#show').click(function () {
    var myapp = new MyApp;
});

我还将其发布为jsFiddle。

我逐步完成了Backbone.js源代码，看起来首先调用render，然后分配events，这就是我所期望的。从我所知道的一切看起来都不错，但是当我点击保存时，onSaveClicked永远不会触发。

所需的功能是单击“显示”显示表单，“保存”将其删除。如果有更好的方法来实现这一点，那就更符合Backbone的基础理念，我也对此持开放态度。您会注意到我在div内嵌入一个未命名的container，这是因为我想为弹出窗口维护一致的锚点。

Answer 1

事件绑定到视图el，但是您永远不会将el附加到DOM。尝试

MyApp = Backbone.View.extend({
    tagName: 'div',
    template: _.template($('#app-template').html()),

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

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

    events: {
      "click .save" : "onSaveClicked"
    },

    onSaveClicked: function () {
        console.log("Save clicked.");
        this.$el.remove();
    }
});

$('#show').click(function () {
    var myapp = new MyApp;
    $("#container").append(myapp.$el);
});

http://jsfiddle.net/WBPqk/18/

请注意，在您的小提琴中，您将click事件绑定到模板使用完成类的.save。

事件委派无法在Backbone.js应用程序中附加事件

1 个答案: