0

PreloadJS のコールバック関数では、スコープが失われています。アロー関数などのさまざまな方法を試しました (これは最高レベルでは有効ではありません... ヒントはありますか? (不正な形式のコード ブロック (クラス定義など) で申し訳ありません。まだこのエディターに慣れています。私を信じてください)作業コードです）...

import Navigation from './Navigation'
import ajax from "./Ajax";
import Helper from "./Helper";

let preload = null;

export default class Page{  

    constructor(){
        this.preload = new createjs.LoadQueue();
        this.preload.addEventListener("fileprogress", this.handleFileProgress);
        this.preload.addEventListener("fileload", this.handleFileComplete);

    }



    initPage(_arg = []){        
        this.buildPage(this.thePage);
    }


    buildPage(_content){
        this.loadImage(item.featured_image_thumbnail_url);

    }

    handleFileComplete(event){      

        console.log(event);
        console.log(this); // undefined

        let el = document.getElementById('heroImage');
        let loader = el.getElementsByClassName('loader')[0];
        this.showPage(); // cannot read property showPage of undefined

    }

    // small arrow test, doesn't seem valid
    //handleFileComplete = (event) =>{
    //    this.showPage();
    //}

    handleFileProgress(event){      
        let hero = document.getElementById('heroImage')
        let loader = hero.getElementsByClassName('loader')[0];
    }

    loadImage(_img){      

        let el = document.getElementById('heroImage');
        let loader = el.getElementsByClassName('loader')[0];

        let loadManifest = [
          {
            id:   'pat',
            src:  _img,
            scope: this
          }];     

        this.preload.loadManifest(loadManifest, true);  
    }

    showPage(){
        //Helper.removeClass(document.getElementById('mytest','hidden'));
    }       

}
4

1 に答える 1

0

OK、わずか5分後に更新....

矢印関数を変数として追加し、それをイベント リスナーに渡しました。これは私の好みの方法ではありませんが、うまくいきます...

constructor(){

    let handleFileCompleted = (event) => {
        this.showPage(event)
    }       

    this.preload = new createjs.LoadQueue();
    this.preload.addEventListener("fileprogress", this.handleFileProgress);
    this.preload.addEventListener("fileload", handleFileCompleted);
}

showPage(event){
   console.log('I'm now reachable!');
   console.log(event); // fileload event
}

おそらく、これは誰でも助けることができます。

もっと良い方法があるかどうかはまだ興味がありますが...

于 2016-12-30T13:27:09.780 に答える