如何从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函数？

回答

相关问题