this.$el.on Backbone.Marionette

this.$el.on Backbone.Marionette

本文关键字：Backbone Marionette on el this      更新时间：2023-09-26

《木偶》中的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;
    }
  };
};

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

App。fileUploadCallbacks返回一个对象，事件名称作为键，处理函数作为值。下面是它的工作原理:

View.$el是一个jQuery对象。

jQuery.on可以接受{ eventType: handlerFunction }格式的对象(参见文档)。

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

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

相关文章：