2

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 が初期化する前にアクセスしようとしていることが原因です。このオプションを使用initして、ドロップゾーンに追加のオブザーバーをセットアップします。


また、それを管理する方法をさらに2つ試しましたが、どちらもエラーを返しました...

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 が初期化する前にアクセスしようとしていることが原因です。このオプションを使用initして、ドロップゾーンに追加のオブザーバーをセットアップします。

4

1 に答える 1

4

.dropzoneDropzone は、初期化時に特定の要素にアタッチしようとします。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()。

于 2013-08-14T15:50:07.317 に答える