如何從Fine-Uploader回調引用外部JavaScript函數？

我有下面的代碼在我user-profile.html：如何從Fine-Uploader回調引用外部JavaScript函數？

<template> 
    <!--Fine-Uploader HTML is here 
    ...--> 
    <script> 
     var uploader = new qq.FineUploader({ 
      element: document.getElementById("uploader"), 
      debug: true, 
      cors: { 
       expected: true 
      }, 
      request: { 
       endpoint: configOptions.baseUrl + '/api/assets', 
       customHeaders: { 
        Authorization: "Bearer " + localStorage.getItem("aurelia_id_token") 
       } 
      }, 
      multiple: false, 
      callbacks: { 
       onComplete: function (id, fileName, responseJSON){ 
        updateProfile(responseJSON.displayUrl); 
       } 
      } 
     }); 
    </script> 
</template>

正如你可以看到，我想調用updateProfile上傳成功完成。我得到了遠遠的onComplete回調，並且正確地解析了JSON響應對象。問題是updateProfile函數位於單獨的.js文件中，名爲user-profile.js。

我正在Aurelia工作，這是創建MVVM模塊的標準慣例，即將文件命名爲.html和.js擴展名。我不知道爲什麼他們沒有在這種情況下共享範圍，但我得到的錯誤：

Caught exception in 'onComplete' callback - updateProfile is not defined

我還試圖簡單地增加一個標準的腳本標籤在索引文件中直接引用.js文件但它也行不通，反正這似乎是一個壞主意。

任何方向在此將不勝感激。

來源

2016-11-23 espressoAndCode

對於第三方庫，jQuery插件等，將它封裝在自定義屬性或自定義元素中總是一個好主意。另外，正如Ashley所說，您不能在模板中使用script元素。

fine-uploader是一個很好的自定義元素的候選人。下面是一個簡化版本，我用我的項目之一：

<!-- fine-uploader.html --> 
<template> 
    <a href="#" class="btn btn-default" role="button">Upload image</a> 
</template>

// fine-uploader.js 
import fine from 'fine-uploader'; 
import {bindable, inject} from 'aurelia-framework'; 

@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 fine.FineUploaderBasic({ 
     debug: true, 
     button: this.element.children[0], 
     callbacks: { 
     onComplete: (id, name, response) => { 
      if (this.uploaded) { 
      this.uploaded(response); 
      } 
     } 
     }, 
     request: { 
     endpoint: this.endpoint, 
     customHeaders: { 
      'authorization': `Bearer ${localStorage.getItem("aurelia_id_token")}` 
     }, 
     method: 'PUT', 
     params: this.params 
     }, 
     scaling: { 
     sendOriginal: false, 
     sizes: [{ maxSize: 500 }] 
     }, 
     validation: { 
     acceptFiles: '.jpg,.png' 
     } 
    }); 
    } 

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

這樣，您就可以從多個地方使用相同的組件。下面是你的情況的示例用法：

<!-- user-profile.html --> 
<template> 
    <require from="../resources/elements/fine-uploader"></require> 

    <!-- ... --> 
    <fine-uploader endpoint="/api/assets" params.bind="uploadParams" 
       uploaded.call="imageUploaded($event)"></fine-uploader> 
</template>

// user-profile.js 
export class UserProfile { 

    activate(id) { 
    this.uploadParams = { 
     userId: id // And/or any other data you need to send with the image upload 
    } 
    } 

    imageUploaded(response) { 
    this.updateProfile(response.displayUrl); 
    } 

    updateProfile(url) { 
    // ... 
    } 
}

來源

2016-11-24 01:59:02

這是訣竅。作爲一項抽象服務，可以重複使用這個功能。謝謝！ – espressoAndCode

您不能將script元素放在Aurelia模板中。您需要將代碼移到您的Aurelia VM中，或者移入到您導入到VM中的單獨模塊中。

來源

2016-11-24 00:33:06

那是我的第一個傾向，但我無法得到FineUploader對象正確加載。我認爲，它希望綁定到模板中的'

'，但腳本在實際加載之前執行，所以我在document.getElementById（「uploader」），'line 。 – espressoAndCode

如何從Fine-Uploader回調引用外部JavaScript函數？

回答

相關問題