Aurelia中的Dropzone实现在组件中不起作用 [英] Dropzone implementation in Aurelia not working in Component

问题描述

我正在尝试将dropzone添加到Aurelia项目中.我遵循了Jeremy Danyow的示例.

I am trying to add dropzone to an Aurelia project. I followed the example of Jeremy Danyow.

当我像他的示例项目一样设置项目时，一切都很好.但是我不想将所有内容都放入main.js和main.html.

It all works fine when I'm setting up the project like his example project. But I don't want to put everything into the main.js and main.html.

因此，我试图将dropzone功能封装到一个可重用的组件中，并将该组件添加到main.html视图中.

So I tried to encapsulate the dropzone functionality into a reusable component and adding this component to the main.html view.

main.html

main.html

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

components/dropzone.js

components/dropzone.js

import dropzone from 'dropzone';

export class Dropzone {

  attached() {
    this.zone = new Dropzone(this.targetElement, { url: "/file/post"});
  }
}

components/dropzone.html

components/dropzone.html

<template>
  <h2>Dropzone from components/dropzone.js</h2>
  <form class="dropzone" ref="targetElement"></form>
</template>

将依赖项添加到aurelia.json

added dependency to aurelia.json

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

不幸的是，这不再起作用了.

Unfortunately this isn't working anymore.

我的代码中缺少什么?

在我的git帐户中查看该项目

谢谢您的建议.

推荐答案

dropzone模块导出的类名为Dropzone(根据您在下面的评论).鉴于此，您将需要更改自己的类名.我建议DropzoneCustomElement.让我知道这是否有效:

The class exported by the dropzone module is named Dropzone (per your comment below). Given this, you'll need to change your own class name. I'd recommend DropzoneCustomElement. Let me know if this works:

main.html

main.html

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

components/dropzone.js

components/dropzone.js

import Dropzone from 'dropzone';

export class DropzoneCustomElement {

  attached() {
    this.zone = new Dropzone(this.targetElement, { url: "/file/post"});
  }
}

components/dropzone.html

components/dropzone.html

<template>
  <h2>Dropzone from components/dropzone.js</h2>
  <form class="dropzone" ref="targetElement"></form>
</template>

这篇关于Aurelia中的Dropzone实现在组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！