我在使用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.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
阵列。