lundi 21 novembre 2016

Ember pass callback to service - undefined this

I have a service to upload many large files in chunks

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

I need a bunch of callbacks to show progress, but the problem is that this in undefined within these callbacks

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

To work around this I have to carry reference to this everywhere.

It works, but it feels terribly wrong. What is the best practice to do this in Ember? Observable property also feels wrong, how would I observe progress of 2000 files? Put everything in one big object and share it across the app?




Aucun commentaire:

Enregistrer un commentaire