Question

木偶中this.$el.on(App.fileUploadCallbacks())的含义是什么？

我知道App.fileUploadCallbacks（）是一个已经在代码中的其他地方定义的函数，但我不习惯看到没有事件名称使用的.on函数+一个函数来调用事件被触发。

App.fileUploadCallbacks = function() {
  return {
    fileuploadadd: function(evt, data) {
      data.files[0].timestamp = +(new Date);
      return data.files[0].originalFile = data.files[0];
    },
    fileuploadprogress: function(evt, data) {
      return App.vent.trigger("file:progress", data);
    },
    fileuploadprocessdone: function(evt, data) {
      return App.vent.trigger('file:dropped', data, $(this));
    },
    fileuploadprocessfail: function(evt, data) {
      return console.w;
    }
  };
};

Answer 1

它只是将事件绑定到回调函数。您的方法返回事件名称的散列以及在引发这些事件时调用的相应回调。

Answer 2

App.fileUploadCallbacks返回一个对象，其中事件名称为键，处理函数为值。这就是它起作用的原因：

View.$el是一个jQuery对象。

jQuery.on可以采用{ eventType: handlerFunction }格式的对象（参见documentation）。

App.fileUploadCallbacks以此格式返回一个对象，因此下面的代码块是等效的：

调用以预期格式返回对象的方法：

 this.$el.on(App.fileUploadCallbacks())

提供对象文字：

this.$el.on({
  fileuploadadd: function(evt, data) {
    data.files[0].timestamp = +(new Date);
    return data.files[0].originalFile = data.files[0];
  },
  fileuploadprogress: function(evt, data) {
    return App.vent.trigger("file:progress", data);
  },
  fileuploadprocessdone: function(evt, data) {
    return App.vent.trigger('file:dropped', data, $(this));
  },
  fileuploadprocessfail: function(evt, data) {
    return console.w;
  }
});

注册各个活动处理程序：

this.$el.on("fileuploadadd", function(evt, data) {
  data.files[0].timestamp = +(new Date);
  return data.files[0].originalFile = data.files[0];
});

this.$el.on("fileuploadprogress", function(evt, data) {
  return App.vent.trigger("file:progress", data);
});

this.$el.on("fileuploadprocessdone", function(evt, data) {
  return App.vent.trigger('file:dropped', data, $(this));
});

this.$el.on("fileuploadprocessfail", function(evt, data) {
    return console.w;
});

请注意，事件名称现在是字符串，而不是对象键，因此需要引用它们。

这个。$ el.on Backbone.Marionette

2 个答案: