如何將Fine-Uploader UI模板與單獨的JavaScript文件結合使用？

Question

我一直在努力將Fine-Uploader整合到Aurelia項目中，並且由於最近的協助，取得了良好的進展。問題在於Fine-Uploader用戶界面代碼看起來不錯並且工作得很好，它要求模板腳本和JavaScript腳本都包含在同一個文件中。這就產生了一個問題，因爲我想：

1. 創建需要.html和.js文件的有效奧裏利亞模塊（自定義元素）。
2. 使用自定義元素提供模塊性，因此該元素可以在幾種情況下重用。
3. 在.js代碼中添加一些業務邏輯。

所以我想吃我的蛋糕，也吃了它。下面的JavaScript代碼工作得很好，但只提供了一個無聊的上傳按鈕，這不像用戶界面代碼那樣友好。

這裏是非常簡單fine-uploader.html文件：

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

這是我目前的fine-uploader.js文件：

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(); 
    } 
} 

是否有可能利用現有的模板腳本以這種方式？我沒有運氣重構此代碼以正確加載。重建已經完成的同樣的東西似乎是一種可怕的浪費。

Answer 1

經過進一步挖掘，我能夠找到一個揭示祕密的代碼片段。有一個名爲template的屬性需要在初始化對象中引用，並給出模板ID的值。例如，FineUploader的Gallery UI的模板ID是qq-template-gallery。這在文檔中被引用爲here，但直到我看到代碼示例時才清楚。

這是我的工作.js文件：

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(); 
    } 
}