主干视图事件中的 Dropzone.js AMD答案

【问题标题】：Dropzone.js AMD inside Backbone view events主干视图事件中的 Dropzone.js AMD
【发布时间】：2013-08-07 08:42:54
【问题描述】：

我在使用 Backbone 和 Require.js 构建的应用程序中使用 Dropzone.js AMD module。 Dropzone 对象正在 Backbone 视图的 render() 函数中创建。我想创建一个事件，它会加载 Dropzone.js 引用并从中删除一些文件。

MyView 模块：

define([
  'jquery',
  'underscore',
  'backbone',
  'dropzone'
  ], function($, _, Backbone, Dropzone){

var MyView = Backbone.View.extend({
  el: $('.products'),
  events: {
    'click .erase_dropzone_file': 'eraseDropzoneFile',
  },
  initialize: function(){
  Dropzone.options.myAwesomeDropzone = {
    init: function() {
      this.on("addedfile", function(file) {
        console.log("uploaded");
      });
      }
    };
  },
  render: function(){
        myAwesomeDropzone = new Dropzone("#my-awesome-dropzone"); 
  },
  eraseDropzoneFile: function(e){
  files = myAwesomeDropzone.files;
  ...

});
  return MyView;
});

未捕获错误：未找到给定元素的 Dropzone。这可能是因为您试图在 Dropzone 有时间初始化之前访问它。使用init 选项在您的 Dropzone 上设置任何其他观察者。

我还尝试了另外两种管理方法，但都返回了一些错误...

render: function(){
this.myAwesomeDropzone = new Dropzone("#my-awesome-dropzone");
},
eraseDropzoneFile: function(){
files = this.myAwesomeDropzone.files;
}

无法读取未定义的属性“文件”。

render: function(){
window.myAwesomeDropzone = new Dropzone("#my-awesome-dropzone");
},
eraseDropzoneFile: function(){ 
files = window.myAwesomeDropzone.files;
}

没有找到给定元素的 Dropzone。这可能是因为您试图在 Dropzone 有时间初始化之前访问它。使用init 选项在您的 Dropzone 上设置任何其他观察者。

【问题讨论】：

您能否发布 shim 配置（假设您使用的是 require.js 2）？
由于我使用的是 Dropzone.js 作为 AMD 模块，所以不需要使用 shim 方法。

标签： javascript backbone.js requirejs dropzone.js

【解决方案1】：

Dropzone 在初始化时尝试将自己附加到任何给定的.dropzone 元素。因此，请确保在脚本加载后立即设置配置：Dropzone.autoDiscover = false;。 （这必须在DOM READY 事件触发之前发生，否则 Dropzone 可能比您更快并且已经尝试发现所有 dropzone。）

当 Dropzone 不自动发现时，它不会使用Dropzone.options 中设置的选项。你必须直接提供它们。

所以删除您的initialize 函数，并将您的渲染函数更改为：

this.myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", {
  init: function() {
    this.on("addedfile", function(file) {
      console.log("added file");
    });
    this.on("success", function(file) {
      console.log("successfully uploaded file");
    });
  }
});

然后您应该能够在eraseDropzoneFile 中访问this.myAwesomeDropzone。与其直接访问this.myAwesomeDropzone.files 数组，不如考虑使用this.myAwesomeDropzone.getAcceptedFiles()。

【讨论】：