Question

我在确定如何向Aurelia添加第三方JavaScript库时遇到了很多麻烦（在本例中为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库代码，Aurelia不会重新触发它。您需要在viewmodel中的attached()方法中手动激活dropzone.js，如下所示：

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

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

因此，您的视图模型可能如下所示：

文件-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(); } }

文件-upload.html

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

Answer 2

尝试将import 'dropzone';添加到您的视图模型中。

Answer 3

尝试使用dropzone-amd-module.min。像这样：

{
  "name": "dropzone",
  "path": "../node_modules/dropzone/dist/min",
  "main": "dropzone-amd-module.min", 
  "resources": [
    "dropzone.min.css"
  ],
  "deps": ["jquery"]
}

然后，import Dropzone from 'dropzone';就像其他答案一样

将第三方JavaScript库（dropzone.js）添加到Aurelia

3 个答案: