使用 Require.js 加载 Dropzone.js？

Question

我想在使用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>

但什么也没发生。

Answer 1

我的问题是，当我将 .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"
    };