主干.js：了解浏览器事件处理和视图删除

Question

我正在摆弄一个看起来像这样的视图和相关模型：

App.Views.Addresses         = App.Views.Addresses || {};
App.Views.Addresses.Address = Backbone.View.extend({

  events: {
    "click button#foo"             : "clear"
  },

  initialize: function(model){
                this.address = model.model;
                this.address.view = this;
                _.extend(this, Backbone.Events);
                this.render();
              },

  render:     function(){
                ... rendering stuff
              },

  clear:      function(){
                this.address.clear();
              }
});

和

var Address = Backbone.Model.extend({

  url:   function() {
           ... url stuff
         },

  clear: function(){
           this.destroy();
           this.view.remove();
         }
});

我在这里面临两个问题。第一个：

我的源代码中有一个 id="foo" 的按钮，并且希望视图能够捕获该按钮的“单击”事件并触发“清除”事件。问题：这不起作用。

无论如何，手动在我的模型上调用“清除”会干净地删除服务器上的数据，但不会删除视图本身。那是第二个问题。希望有经验的大侠可以赐教。

提前谢谢 费利克斯

Answer 1

第一个问题：

• 您的按钮必须在视图呈现的元素内。
  • 仅内部元素的主干范围事件
• 您必须在 this.el 元素中呈现您的视图
  • 主干使用该元素进行委派

第二个问题：

• 使用事件破坏您的视图
  • 不应将视图存储在模型中。这是 MVC 中的一种“不不”。您的模型在删除时已经发出“删除”事件。您的视图应该倾听它并做出相应的行为。
• 您必须自己从 DOM 中删除视图元素
  • 这不是由主干处理的。

其他通用cmets：

• 视图已经在扩展 Backbone.Events
• 使用 this.model 代替 this.address