javascript - Backbone : Why are events syntax quite different between model and view?

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"
  }
})

我的问题

定义事件语法在模型/集合和 View 之间有很大不同，为什么要这样设计？

我认为这样定义模型事件更好。但是 backbone 不支持它。

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以及您将在 View 中使用的等效项，因为它会在删除 View 时处理清理监听:.listenTo和 .listenToOnce .

因此在您的示例中 "change"模型中的事件是一个内部事件，当属性更改时，Backbone 会触发该事件。 "change"在 View 中是 jQuery DOM 事件(实际上是委托(delegate)事件)，您可以选择在 View 中收听更深层次的内容 "change .myinput"所以它们不等价。

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