Dropzone.js AMD in Backbone view events

Question

Я использую Dropzone.js AMD module в приложении, построенном с Backbone и Require.js. Объект Dropzone создается внутри функции render() представления Backbone. Я хотел бы создать событие, которое будет загружать ссылку на 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; 
}); 

Uncaught Ошибка: Нет 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 может быть быстрее, чем вы, и уже пытались обнаружить все DropZones.)

Когда 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().