Backbone:为什么模型和视图之间的事件语法差别很大？

Question

在Backbone.Model中定义事件

var Todo = Backbone.Model.extend({
  initialize: function(){
    this.on('change', function(){
        console.log('- Values for this model have changed.');
    });
  }
})

在Backbone.View中定义事件

var TodoView = Backbone.View.extend({
  className: "document-row",
  events: {
    "click .icon":          "open",
    "click .button.delete": "destroy"
  }
})

我的问题

定义事件语法在模型/集合和视图之间是完全不同的,为什么它们以这种方式设计？

我认为最好定义这样的模型事件.但骨干不支持它.

var Todo = Backbone.Model.extend({
  events: {
    "change": "foo"
  },

  foo: function(){
    console.log("test")
  }
});

Answer 1

有两种不同类型的事件：Backbone.Events和 jQuery DOM 事件 - 所以让这些看起来相同似乎是一个坏主意，因为它会使代码混乱，更不用说它实际上不起作用，因为 View UI 事件需要不同的信息：'<eventName> <optional DOM selector>: <methodName>'而正常内部事件具有不同的语法。

Backbone.Events遵循典型的“发布/订阅”模式 - 它只是应用程序通过或在内部说“发生了一些事情”.trigger和“我想知道什么时候发生了事情”的一种方式.on，或者.once是您在视图中使用的等效方式，因为它处理删除视图时清理监听：.listenTo和.listenToOnce。

因此，在您的示例中，"change"模型中的事件是一个内部事件，当属性更改时 Backbone 会触发该事件。视图中的"change"是 jQuery DOM 事件（实际上是委托事件），您可以选择监听视图中更深层的内容，"change .myinput"因此它们并不等效。

另一个区别是，它.trigger可以在第一个参数（事件名称）之后传递它喜欢的任何参数，而 View 事件传递你无法控制的 DOM 事件对象，例如onChange: function(ev) { ev.preventDefault(); }。