Question

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

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

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

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

然后，您应该可以访问this.myAwesomeDropzone中的eraseDropzoneFile。您可以考虑使用this.myAwesomeDropzone.files而不是直接访问this.myAwesomeDropzone.getAcceptedFiles()数组。

Dropzone.js AMD在Backbone视图事件中

1 个答案: