У меня много проблем с выяснением, как добавить стороннюю библиотеку JavaScript в Aurelia (в данном случае dropzone.js).

Я установил dropzone через npm и настроил его в aurelia.json:

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

И добавил оператор require для CSS в мой app.html:

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

Однако, когда я пытаюсь выполнить простой тест, например, просто вставить HTML прямо в шаблон, функциональность не работает.

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

Я также попробовал это решение, но так и не смог заставить его работать: Реализация Dropzone в Aurelia не работает в Компоненте

1
user7286765 12 Дек 2016 в 22:09

3 ответа

Лучший ответ

Это не будет работать в соответствии с вашим примером просто потому, что код библиотеки dropzone.js загружается до того, как ваша модель представления активирована, и Aurelia не будет повторно запускать ее. Вам нужно будет вручную активировать dropzone.js в вашем методе attached() в вашей модели представления, например:

// 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>
2
LStarky 13 Дек 2016 в 02:52

Попробуйте использовать 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'; как в другом ответе

0
Fabio Luz 12 Дек 2016 в 19:56

Попробуйте добавить import 'dropzone'; к вашей модели представления.

0
TylerJPresley 12 Дек 2016 в 19:26