Question

我上传了一个带有ember-cli-dropzone（https://www.npmjs.com/package/ember-cli-dropzonejs）的文件。这很好用。现在我需要用文件名更新我的模板。

在组件内部，我在回调函数中有文件名。但现在我需要将它传递给路由setupController函数。所以我可以使用controller.set，如下所示。

组件JS：

export default Ember.Component.extend({
  actions: {
   submit: function(){
     this.sendAction('action', this.submission);
   }
 },
 uploadSuccess: function(file, response) {
   if (response == '200') {
    return file.name;
   }
 }
});

路由中的setupController：

setupController: function(controller, model){
    var submission = this.store.createRecord('submission', { filter: { assignment_id: model.id } });

    submission.filename = filenamePlease; 
    controller.set('submission', submission);

}

模板中的主要内容：

{{submission-form submission=submission user=user action='createSubmission'}}

组件HBS：

<form {{action 'submit' on='submit'}}>
  {{drop-zone url='http://localhost:4200/api/uploads' success=uploadSuccess}}
  {{input type="hidden" value=submission.filename}}
  <button class="bnt" type="submit">{{buttonLabel}}</button>
</form>

如何在文件上传后更新相应的模板并且uploadSuccess已返回文件名？

Answer 1

在组件JavaScript文件中：

uploadSuccess(file, response) {
    if (response == '200') {
        this.sendAction('uploadAction', file.name);
    }
}

模板中的组件声明：

{{submission-form
    submission=submission
    user=user
    action='createSubmission'
    uploadAction='uploadSuccess'
}}

控制器中的操作（不在路线中）：

actions: {
    uploadSuccess(name) {
        // you have got your filename as `name` here
        this.set('submission.filename', name);
    }
}

你说uploadSuccess中有错误的背景。你可以尝试：

uploadSuccess: Ember.run(this, function(file, response) {
    if (response == '200') {
        this.sendAction('uploadAction', file.name);
    }
})

将变量从组件中的回调函数传递给模板

1 个答案: