Dropzone.js AMD内部Backbone视图事件

Dropzone.js AMD inside Backbone view events

本文关键字：视图 事件 Backbone 内部 js AMD Dropzone      更新时间：2023-09-26

我在使用Backbone和Require.js构建的应用程序中使用Dropzone.js AMD模块。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;
}

无法读取未定义的属性"files"

2.

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

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

初始化时，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.getAcceptedFiles()，而不是直接访问this.myAwesomeDropzone.files阵列。

相关文章：