我在使用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上设置任何其他观察者。
答案 0 :(得分: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
。您可以考虑使用this.myAwesomeDropzone.files
而不是直接访问this.myAwesomeDropzone.getAcceptedFiles()
数组。