UI模块添加数据绑定装饰器

1.添加数据基类,子类自动添加代理,数据变化自动通知
 2.支持同属性多装饰器
This commit is contained in:
gongxh
2025-08-29 15:25:10 +08:00
parent b62a4af8db
commit e48011d941
45 changed files with 1354 additions and 21 deletions

View File

@@ -0,0 +1,127 @@
/**
* @Author: Gongxh
* @Date: 2025-08-19
* @Description:
*/
import { Level } from "../../Data/global/Level";
import { fgui, kunpo } from "../../header";
import { DataHelper } from "../../Helper/DataHelper";
const { bindMethod, bindProp } = kunpo.data;
const { uiclass, uiprop, uiclick } = kunpo._uidecorator;
@uiclass("Window", "Data", "DataWindow")
export class DataWindow extends kunpo.Window {
@uiprop
@bindProp(Level, data => data.storey, (item: fgui.GTextField, value: number, data: Level) => {
item.text = `关卡:${data.levelid} 层数:${value}`;
})
@bindProp(Level, data => data.levelid, (item: fgui.GTextField, value: number, data: Level) => {
item.text = `关卡:${value} 层数:${data.storey}`;
})
private lab_level: fgui.GTextField;
@uiprop
@bindProp(Level, data => data.storey, (item: fgui.GTextField, value: number, data: Level) => {
item.text = `层数:${value}`;
})
private lab_storey: fgui.GTextField;
@uiprop
@bindProp(Level, data => data.refreshMin, (item: fgui.GTextField) => {
item.text = `最小值:${DataHelper.level.data.min}`;
})
private lab_min: fgui.GTextField;
@uiprop
@bindProp(Level, data => data.refreshMax, (item: fgui.GTextField) => {
item.text = `最大值:${DataHelper.level.data.max}`;
})
private lab_max: fgui.GTextField;
@uiprop
@bindProp(Level, data => data.ispassed, (item: fgui.GTextField) => {
item.text = `是否通过:${DataHelper.level.ispassed ? '是' : '否'}`;
})
private lab_ispassed: fgui.GTextField;
protected onInit(): void {
this.adapterType = kunpo.AdapterType.Bang;
this.type = kunpo.WindowType.Normal;
}
protected onShow(userdata?: any): void {
}
protected onClose(): void {
}
@uiclick
private onRefreshLevel(): void {
DataHelper.level.refreshLevel(DataHelper.level.levelid + 1);
}
@uiclick
private onRefreshStorey(): void {
DataHelper.level.refreshStorey(DataHelper.level.storey + 1);
}
@uiclick
private onRefreshBool(): void {
DataHelper.level.refreshBool(!DataHelper.level.ispassed);
}
@uiclick
private onRefreshData(): void {
DataHelper.level.data = { min: 1, max: 100 };
}
@uiclick
private onRefreshMin(): void {
DataHelper.level.refreshMin(DataHelper.level.data.min + 1);
}
@uiclick
private onRefreshMax(): void {
DataHelper.level.refreshMax(DataHelper.level.data.max - 1);
}
@uiclick
private onRefreshAll(): void {
DataHelper.level.init({ min: 1, max: 100, ispassed: true, levelid: 1, storey: 1 });
}
@uiclick
private onTouchClose(): void {
kunpo.WindowManager.closeWindow(this.name);
}
@bindMethod(Level, data => data.ispassed)
private refreshBool(level: Level): void {
this.lab_ispassed.text = `是否通过:${level.ispassed ? '是' : '否'}`;
}
@bindMethod(Level, data => data.refreshMin)
private refreshMin(level: Level): void {
this.lab_min.text = `对象属性min${level.data.min}`;
}
@bindMethod(Level, data => data.refreshMax)
private refreshMax(level: Level): void {
this.lab_max.text = `对象属性max${level.data.max}`;
}
@bindMethod(Level, data => data.refreshMax)
@bindMethod(Level, data => data.refreshMin)
@bindMethod(Level, data => data.init)
@bindMethod(Level, data => data.data)
private refreshData(level: Level): void {
console.log('触发回调了');
this.lab_min.text = `对象属性min${level.data.min}`;
this.lab_max.text = `对象属性max${level.data.max}`;
}
}

View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "09bc366d-d2c6-46d1-b5b1-1f7e75f2be09",
"files": [],
"subMetas": {},
"userData": {}
}

View File

@@ -0,0 +1,9 @@
{
"ver": "1.2.0",
"importer": "directory",
"imported": true,
"uuid": "6aabaf5c-aed0-45c8-acc4-9fc86646c3f7",
"files": [],
"subMetas": {},
"userData": {}
}

View File

@@ -0,0 +1,26 @@
/**
* @Author: Gongxh
* @Date: 2025-08-30
* @Description:
*/
import { Level } from "../../../Data/global/Level";
import { fgui, kunpo } from "../../../header";
const { uiheader, uiprop, uicom, uiclick } = kunpo._uidecorator;
const { bindMethod, bindProp } = kunpo.data;
@uicom("Data", "DataItem")
export class DataItem extends fgui.GComponent {
@uiprop
@bindProp(Level, data => data.levelid, (item: fgui.GTextField, value: number, data: Level) => {
item.text = `关卡回调\n关卡:${value}\n层数:${data.storey}`;
})
@bindProp(Level, data => data.storey, (item: fgui.GTextField, value: number, data: Level) => {
item.text = `层数回调\n关卡:${data.levelid}\n层数:${value}`;
})
private lab_level: fgui.GTextField;
public onInit(): void {
}
}

View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "8eacd9e1-5ee5-4b18-9e66-4f7e70787268",
"files": [],
"subMetas": {},
"userData": {}
}