Ember 将回调传递给服务 - 未定义此

Question

我有一项服务可以分块上传许多大文件

export default Ember.Service.extend({
  run(files, callbacks) {
    // ugly async FileReader and ajax
    // calling callbacks during the process
  }
})

我需要一堆回调来显示进度，但问题是 this 在这些回调中未定义

export default Ember.Component.extend({
  upload: Ember.inject.service(),

  didInsertElement() {
    // bind fileinput change event to set up pending files
  },

  ondonesingle(self, file, uuid) {
    // this is undefined
    // self is real this
  },

  actions: {
    submit() {
      let callbacks = {
        ondoneall: this.ondoneall,
        ondonesingle: this.ondonesingle,
        onprogressall: this.onprogressall,
        onprogresssingle: this.onprogresssingle,
        onerror: this.onerror,
        object: this // will be passed as first argument to each callback
      };
      this.get('upload').run(this.get('pending_files'), callbacks);
    },
  }
})

为了解决这个问题，我必须到处引用它。

它有效，但感觉非常错误。在 Ember 中执行此操作的最佳做法是什么？ Observable 属性也感觉不对，我怎么观察2000个文件的进度呢？将所有内容都放在一个大对象中并在整个应用程序中共享？

Answer 1

this 回归的原因 undefined 是当函数被传递时，它的上下文 (this) 会发生变化。您可以创建一个使用 function.bind 显式设置其上下文的新函数。使用 function.bind 时，无论您在哪里调用新函数或将其分配给什么值/属性，它的上下文都将保持不变。

see MDN for Function.prototype.bind

export default Ember.Component.extend({
  upload: Ember.inject.service(),

  didInsertElement() {
    // bind fileinput change event to set up pending files
  },

  ondonesingle(file, uuid) {
  },

  actions: {
    submit() {
      let callbacks = {
        ondoneall: this.ondoneall.bind(this),
        ondonesingle: this.ondonesingle.bind(this),
        onprogressall: this.onprogressall.bind(this),
        onprogresssingle: this.onprogresssingle.bind(this),
        onerror: this.onerror.bind(this)
      };
      this.get('upload').run(this.get('pending_files'), callbacks);
    },
  }
})

Ember 将回调传递给服务 - 未定义此

Ember pass callback to service - undefined this

ember.js

ember.js-2