Ⓔeui.Binding 用法

雙向綁定資料操作

namespace edwin {

    export class MainUI extends eui.Component {

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

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;

            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
        }

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

    }

}