javascript - 将第 3 方 JavaScript 库 (dropzone.js) 添加到 Aurelia

Question

我在弄清楚如何将第 3 方 JavaScript 库添加到 Aurelia(在本例中为 dropzone.js)时遇到了很多麻烦。

我已经通过 npm 安装了 dropzone 并在 aurelia.json 中配置了它:

{
  "name": "dropzone",
  "path": "../node_modules/dropzone/dist/min",
  "main": "dropzone.min",
  "resources": [
    "dropzone.min.css"
  ]
}

并将 CSS 的 require 语句添加到我的 app.html 中:

<require from="dropzone/dropzone.min.css"></require>

但是，当我尝试做一个简单的测试时，比如将 HTML 直接放入我的模板中，该功能不起作用。

<template>
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</template>

我也尝试过这个解决方案，但无法正常工作:Dropzone implementation in Aurelia not working in Component

Answer 1

根据您的示例，它不会起作用，因为 dropzone.js 库代码是在您的 View 模型被激活之前加载的，并且 Aurelia 不会重新触发它。您需要在 View 模型的 attached() 方法中手动激活 dropzone.js，如下所示:

// JQuery option
$("div#myId").dropzone({ url: "/file/post" });

// Non-JQuery option
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

因此，您的 View 模型可能如下所示:

file-upload.js

export class FileUpload {

  attached() {
    // activate dropzone.js element
    this.zone = new Dropzone(this.dz, { url: "/file/post"});
  }

  detached() {
    // deactivate the element
    this.zone.destroy();
  }

}

file-upload.html

<template>
  <form ref="dz" action="/file-upload" class="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
  </form>
</template>