eui-eui.Binding

eui.Binding 使用範例

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private prop1: number = 1;
    private prop2: number = 2;

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        eui.Binding.bindProperty(this, ['prop1'], this, 'prop2'); // 讓 prop2 綁定於 prop1
        this.prop1 = 123;
        console.log(this.prop2); // 123
        this.prop2 = 234;
        console.log(this.prop1); // 123, 更改 prop2 不會影響 prop1
        eui.Binding.bindProperty(this, ['prop2'], this, 'prop1'); // 讓 prop1 綁定於 prop2
        this.prop2 = 234;
        console.log(this.prop1); // 234, 資料已雙向綁定, react, vue, angular 都有這個概念
        eui.Binding.bindHandler(this, ['prop1'], this.watcherHander, this); // 事件綁定預設會觸發一次, watcherHander: 234 234 234
        this.prop1 = 111; // 事件因為更改 prop1 而觸發, watcherHander: 111 111 111
        this.prop2 = 222; // 事件因為更改 prop2 導致 prop1 更改而觸發, watcherHander: 222 222 222

    }

    private watcherHander(value: any): void {
        egret.log('watcherHander:' + ' ' + value + ' ' + this.prop1 + ' ' + this.prop2);
    }

}