エンバーは、サービスへのコールバックを渡す - この

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でこれを行うベストプラクティスは何ですか？観測可能なプロパティも間違っていると感じます。2000ファイルの進行状況をどのように確認できますか？すべてのものを1つの大きなオブジェクトに入れ、アプリ全体で共有しますか？

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