5

Backbone と Require.JS で構築されたアプリケーションで Dropzone.js を使用したいのですが、実装方法がわかりません。

require() を使用する必要がありますか?

それを管理する最も巧妙な方法は何ですか？

編集：

次のように、バックボーン ビュー モジュールで dropzone-amd-module を使用するようにしました。

define([
  'jquery',
  'underscore',
  'backbone',
  'dropzone'
  ], function($, _, Backbone, Dropzone){

var NewProduct = Backbone.View.extend({
  el: $('.products'),
  render: function(){

      $(this).empty();
      require(['text!templates/product_new.html'], function(product_new){
        var product_new = _.template(product_new);
        $('.products').html(product_new);
      }); 

      Dropzone.forElement("#my-awesome-dropzone").on("addedfile", function(file) {
        console.log("uploaded");
      });

    }
  });

return NewProduct;
});

テンプレートでこの HTML を使用する:

<form action="/upload'" class="dropzone" id="my-awesome-dropzone" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" />
  </form>

しかし、何も起こりませんでした。

4

3 に答える 3

0

私の問題は、要素に .dropzone クラスを配置すると、初期化されることです。しかし、私の define() モジュールでは、アプリケーションによって決して選択されないオプションを設定しています。dropzone-amd-module を使用しています。何が起こっているのかわかりません。

**HTML**
<form action="/vendor/uploadProductImage" class="dropzone" id="product-image-drop">
    <div class="dz-default dz-message"></div>
<input type="hidden" name="productId" value=${productInstance.id}>
</form>



**JS**
Dropzone.options.productImageDrop = {
        url : '/vendor/uploadProductImage',
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 5, // MB
        acceptedFiles: ".jpg, .png, .jpeg",
        createImageThumbnails: true,
        maxThumbnailFilesize: 15, // MB,
        thumbnailWidth: "50px",
        thumbnailHeight: "50px"
    };
于 2014-02-22T16:45:18.140 に答える