Dropzone.js AMD內部Backbone視圖事件

我在使用Backbone和Require.js構建的應用程序中使用Dropzone.js AMD module。 Dropzone對象是在Backbone視圖的render（）函數內部創建的。我想創建一個事件，它會加載Dropzone.js引用，並從中刪除一些文件。Dropzone.js AMD內部Backbone視圖事件

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有時間初始化之前嘗試訪問它。使用init選項來設置您的Dropzone上的任何其他觀察者。

我也試過兩個方面如何管理它，但都返回了一些錯誤......

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

無法讀取屬性未定義的'文件'。

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

無懸浮窗找到指定元素。這可能是因爲您在Dropzone有時間初始化之前嘗試訪問它。使用init選項來設置您的Dropzone上的任何其他觀察者。

來源

2013-08-07 Ladislav Maxa

你可以發佈墊片配置（假設你使用的是require.js 2）嗎？ – tsiki

因爲我使用Dropzone.js作爲AMD模塊，所以不需要使用填充方法。 –

當初始化時，Dropzone嘗試將自己附加到任何給定的.dropzone元素。因此，一旦加載腳本，請務必設置配置：Dropzone.autoDiscover = false;。 （這有DOM READY事件觸發之前發生，否則懸浮窗可能會比你更快，已經嘗試去發現所有dropzones。）

當懸浮窗不自動發現，也不會使用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()。

來源

2013-08-14 15:50:07 enyo

Dropzone.js AMD內部Backbone視圖事件

回答

相關問題