Aurelia 如何将优秀的上传器UI模板与单独的JavaScript文件结合起来？

我一直致力于将Fine Uploader整合到Aurelia项目中，由于最近的帮助，我已经取得了良好的进展。问题在于，精美的上传器UI代码看起来很棒，工作也很好，它要求模板脚本和JavaScript脚本都包含在同一个文件中。这就产生了一个问题，因为我想：

创建需要

.html

和

.js

文件的有效Aurelia模块（自定义元素）

使用自定义元素来提供模块化，因此该元素可以在多个场景中重用

在

.js

代码中添加一些业务逻辑

所以我也想吃蛋糕。下面的javascript代码工作得很好，但只为上传提供了一个无聊的按钮，这远不如UI代码对用户友好

下面是非常简单的

fine uploader.html

文件：

<template>
    <div id="uploader" ></div>
    <a href="#" class="btn btn-default" role="button">Upload image</a>
<template>

import 'fine-uploader/fine-uploader/fine-uploader-gallery.css';

import qq from 'fine-uploader/lib/core';
import {bindable, inject} from 'aurelia-framework';
import configOptions from './config-global';

@inject(Element)
export class FineUploader {

  @bindable endpoint;            // URL to upload to
  @bindable params = {};         // Any additional upload params
  @bindable uploaded = () => {}; // Uploaded callback for consumers

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.uploader = new qq.FineUploaderBasic({
      debug: true,
      button: this.element.children[0],
      callbacks: {
        onComplete: (id, name, response) => {
          if (this.uploaded) {
            this.uploaded(response);
          }
        }
      },
      request: {
        endpoint: configOptions.baseUrl + this.endpoint,
        customHeaders: {
          'authorization': `Bearer ${localStorage.getItem("aurelia_id_token")}`
        },
        method: 'POST',
        params: this.params

      }

    });
  }

  detached() {
    // Apparently, no destroy() method
    // https://github.com/FineUploader/fine-uploader/issues/1038
    //this.uploader.reset();
  }
}

import '../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.css';
import qq from 'fine-uploader/fine-uploader/fine-uploader';
import {bindable, inject} from 'aurelia-framework';
import configOptions from './config-global';

@inject(Element)
export class FineUploader {

  @bindable endpoint;            // URL to upload to
  @bindable params = {};         // Any additional upload params
  @bindable uploaded = () => {}; // Uploaded callback for consumers
  @bindable itemlimit = 50;           // integer
  @bindable allowedextensions = [];   // array of strings - do not use . in ext name

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.uploader = new qq.FineUploader({
      debug: true,
      element: document.getElementById("fine-uploader-gallery"),
      template: 'qq-template-gallery',
      callbacks: {
        onComplete: (id, name, response) => {
          if (this.uploaded) {
            this.uploaded(response);
          }
        }
      },
      validation: {
        itemLimit: this.itemlimit,
        allowedExtensions: this.allowedextensions
      },
      request: {
        endpoint: configOptions.baseUrl + this.endpoint,
        customHeaders: {
          'authorization': `Bearer ${localStorage.getItem("aurelia_id_token")}`
        },
        method: 'POST',
        params: this.params 
      }
    });
  }

  detached() {
    // Apparently, no destroy() method
    // https://github.com/FineUploader/fine-uploader/issues/1038
    //this.uploader.reset();
  }
}

---

是否可以以这种方式使用现有模板脚本？我没有幸重构此代码以正确加载。重建同样已经完成的东西似乎是一种可怕的浪费

进一步挖掘后，我找到了一段揭示秘密的代码片段。有一个名为

template

的属性需要在初始化对象中引用，并给定模板id的值。例如，FineUploader的Gallery UI的模板id为

qq template Gallery

。文档中引用了这一点，但直到我看到一个代码示例后才清楚

这是我的工作

.js

文件：

<template>
    <div id="uploader" ></div>
    <a href="#" class="btn btn-default" role="button">Upload image</a>
<template>

import 'fine-uploader/fine-uploader/fine-uploader-gallery.css';

import qq from 'fine-uploader/lib/core';
import {bindable, inject} from 'aurelia-framework';
import configOptions from './config-global';

@inject(Element)
export class FineUploader {

  @bindable endpoint;            // URL to upload to
  @bindable params = {};         // Any additional upload params
  @bindable uploaded = () => {}; // Uploaded callback for consumers

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.uploader = new qq.FineUploaderBasic({
      debug: true,
      button: this.element.children[0],
      callbacks: {
        onComplete: (id, name, response) => {
          if (this.uploaded) {
            this.uploaded(response);
          }
        }
      },
      request: {
        endpoint: configOptions.baseUrl + this.endpoint,
        customHeaders: {
          'authorization': `Bearer ${localStorage.getItem("aurelia_id_token")}`
        },
        method: 'POST',
        params: this.params

      }

    });
  }

  detached() {
    // Apparently, no destroy() method
    // https://github.com/FineUploader/fine-uploader/issues/1038
    //this.uploader.reset();
  }
}

import '../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.css';
import qq from 'fine-uploader/fine-uploader/fine-uploader';
import {bindable, inject} from 'aurelia-framework';
import configOptions from './config-global';

@inject(Element)
export class FineUploader {

  @bindable endpoint;            // URL to upload to
  @bindable params = {};         // Any additional upload params
  @bindable uploaded = () => {}; // Uploaded callback for consumers
  @bindable itemlimit = 50;           // integer
  @bindable allowedextensions = [];   // array of strings - do not use . in ext name

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.uploader = new qq.FineUploader({
      debug: true,
      element: document.getElementById("fine-uploader-gallery"),
      template: 'qq-template-gallery',
      callbacks: {
        onComplete: (id, name, response) => {
          if (this.uploaded) {
            this.uploaded(response);
          }
        }
      },
      validation: {
        itemLimit: this.itemlimit,
        allowedExtensions: this.allowedextensions
      },
      request: {
        endpoint: configOptions.baseUrl + this.endpoint,
        customHeaders: {
          'authorization': `Bearer ${localStorage.getItem("aurelia_id_token")}`
        },
        method: 'POST',
        params: this.params 
      }
    });
  }

  detached() {
    // Apparently, no destroy() method
    // https://github.com/FineUploader/fine-uploader/issues/1038
    //this.uploader.reset();
  }
}