Добавление сторонней библиотеки JavaScript (dropzone.js) в Aurelia

Question

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

Я установил Dropzone через НПЙ и настроил его в aurelia.json:

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

И добавил требуется заявление для 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 implementation in Aurelia not working in Component

Answer 1

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

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

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

Таким образом, ваш ViewModel может выглядеть следующим образом:

файл-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';, как и в другой ответ