backbone.js:了解浏览器事件处理和视图删除

Geo*_*ieF 4 events backbone.js underscore.js

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

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();
              }
});
Run Code Online (Sandbox Code Playgroud)

var Address = Backbone.Model.extend({

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

  clear: function(){
           this.destroy();
           this.view.remove();
         }
});
Run Code Online (Sandbox Code Playgroud)

我在这里遇到两个问题.第一个:

我的源代码中有一个id ="foo"的按钮,希望该视图捕获此按钮的"click"事件并触发'clear'事件.问题:这不起作用.

无论如何,手动调用我的模型'清除'干净地删除服务器上的数据,但不删除视图本身.这是第二个问题.希望有经验的人能够启发我.

先谢谢菲利克斯

Jul*_*ien 11

第一个问题:

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

第二个问题:

  • 使用事件来破坏您的视图
    • 您不应将视图存储在模型中.这在MVC中是一种"不,不".您的模型在删除时已经发出"删除"事件.您的视图应该听取它并相应地表现.
  • 您必须自己从DOM中删除视图元素
    • 这不是由骨干处理的.

其他一般性意见:

  • 视图已经扩展了Backbone.Events
  • 使用this.model而不是this.address