Fine-Uploader UI 템플릿을 별도의 JavaScript 파일과 결합하려면 어떻게해야합니까?

Question

저는 Aurelia 프로젝트에 Fine-Uploader를 통합하기 위해 노력해 왔으며 최근의 도움 덕분에 진전을 이루었습니다. 문제는 멋지게 잘 작동하는 파인 업 로더 UI 코드는 템플릿 스크립트와 자바 스크립트 스크립트가 모두 동일한 파일에 포함되어야한다는 것입니다. 이것은 내가 원하는 이후, 문제를 만듭니다

1. .html과 .js 파일이 필요합니다 유효한 아우렐 리아 모듈 (사용자 지정 요소)를 만듭니다.
2. 사용자 지정 요소를 사용하여 모듈성을 제공하므로 여러 시나리오에서 요소를 다시 사용할 수 있습니다.
3. .js 코드에 비즈니스 로직을 추가하십시오.

그래서 나는 내 케이크를 먹고 싶습니다. 아래의 자바 스크립트 코드는 정상적으로 작동하지만 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으로 표시되어 있지만 코드 샘플을 볼 때까지 명확하지 않았습니다.

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

: 여기

내는 .js 파일을하고있다