将第三方JavaScript库(dropzone.js)添加到Aurelia [英] Adding 3rd-party JavaScript library (dropzone.js) to Aurelia

问题描述

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

I'm having a lot of trouble figuring out how to add a 3rd-party JavaScript library to Aurelia (in this case dropzone.js).

我已经通过npm安装了dropzone并在aurelia.json中对其进行了配置:

I've installed dropzone via npm and configured it in aurelia.json:

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

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

And added the require statement for the CSS to my app.html:

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

但是，当我尝试进行简单的测试(例如将HTML直接放入模板中)时，该功能无法正常工作.

However, when I try to do a simple test like just putting the HTML directly in my template, the functionality does not work.

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

我也尝试过此解决方案，但无法使其正常运行:

I've also tried this solution but couldn't get it working as well: Dropzone implementation in Aurelia not working in Component

推荐答案

仅根据dropView.js库代码是在激活视图模型之前加载的，而Aurelia不会重新启动，这在您的示例中是行不通的-触发它.您需要在视图模型的attached()方法中手动激活dropzone.js，如下所示:

It won't work according to your example simply because the dropzone.js library code is loaded before your view-model is activated, and Aurelia won't re-trigger it. You'll need to manually activate dropzone.js within your attached() method in your viewmodel, like this:

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

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

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

Therefore, your view-model might look like this:

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>

这篇关于将第三方JavaScript库(dropzone.js)添加到Aurelia的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！