将第三方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屋!