Fine-Uploader UIテンプレートと別のJavaScriptファイルを組み合わせるにはどうすればよいですか？

Question

私はFine-UploaderをAureliaプロジェクトに取り入れています。問題は、ファインアップローダーのUIコードがすばらしくてうまく動作するために、テンプレートスクリプトとJavaScriptスクリプトの両方が同じファイルに含まれている必要があることです。これは私がしたいことから、問題を作成します。

1. .htmlと.jsファイルを必要とし、有効なアウレリアモジュール（カスタム要素）を作成します。
2. カスタム要素を使用してモジュール性を提供し、複数のシナリオで要素を再利用できます。
3. .jsコードにビジネスロジックを追加します。

私はケーキを食べて食べたいです。下のjavascriptコードはうまく動作しますが、UIコードほどユーザーフレンドリーではないアップロード用の退屈なボタンを提供します。

はここで非常に単純な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のギャラリー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(); 
    } 
}