2

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

我的视图模块：

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 上设置任何其他观察者。


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

1.

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

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

2.

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

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

4

1 回答 1

4

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

然后，您应该能够访问this.myAwesomeDropzone. 您可以考虑使用代替，而不是直接eraseDropzoneFile访问Array。this.myAwesomeDropzone.filesthis.myAwesomeDropzone.getAcceptedFiles()

于 2013-08-14T15:50:07.317 回答