257 lines
8.0 KiB
TypeScript
257 lines
8.0 KiB
TypeScript
import { _decorator, Component, Node, Label, Button } from 'cc';
|
||
import { DataBinding, BindingType, BindingMode } from '@esengine/mvvm-ui-framework';
|
||
import { UserInfoViewModel } from './UserInfoViewModel';
|
||
|
||
const { ccclass, property } = _decorator;
|
||
|
||
/**
|
||
* 用户信息视图组件
|
||
* 展示如何使用 MVVM 框架进行 Label 数据绑定
|
||
*/
|
||
@ccclass('UserInfoView')
|
||
export class UserInfoView extends Component {
|
||
|
||
@property(Label)
|
||
userNameLabel: Label = null!;
|
||
|
||
@property(Label)
|
||
levelLabel: Label = null!;
|
||
|
||
@property(Label)
|
||
scoreLabel: Label = null!;
|
||
|
||
@property(Label)
|
||
coinsLabel: Label = null!;
|
||
|
||
@property(Label)
|
||
onlineStatusLabel: Label = null!;
|
||
|
||
@property(Label)
|
||
displayNameLabel: Label = null!;
|
||
|
||
@property(Label)
|
||
totalAssetsLabel: Label = null!;
|
||
|
||
@property(Button)
|
||
addScoreButton: Button = null!;
|
||
|
||
@property(Button)
|
||
addCoinsButton: Button = null!;
|
||
|
||
@property(Button)
|
||
levelUpButton: Button = null!;
|
||
|
||
@property(Button)
|
||
toggleOnlineButton: Button = null!;
|
||
|
||
@property(Button)
|
||
resetButton: Button = null!;
|
||
|
||
private viewModel: UserInfoViewModel;
|
||
private dataBinding: DataBinding;
|
||
private bindingIds: string[] = [];
|
||
|
||
onLoad() {
|
||
// 初始化数据绑定系统
|
||
this.dataBinding = DataBinding.getInstance();
|
||
|
||
// 创建 ViewModel
|
||
this.viewModel = new UserInfoViewModel();
|
||
|
||
// 设置数据绑定
|
||
this.setupDataBindings();
|
||
|
||
// 设置按钮事件
|
||
this.setupButtonEvents();
|
||
}
|
||
|
||
/**
|
||
* 设置数据绑定
|
||
*/
|
||
private setupDataBindings(): void {
|
||
// 用户名绑定
|
||
if (this.userNameLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.userNameLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.REPLACE,
|
||
source: 'userName',
|
||
target: 'string'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
|
||
|
||
this.dataBinding.bind(this.viewModel, this.coinsLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.REPLACE,
|
||
source: 'price',
|
||
target: 'string',
|
||
converter: 'currency', // 货币转换器
|
||
converterParams: ['USD', 2], // 美元，2位小数
|
||
format: '价格: {0}'
|
||
});
|
||
|
||
this.dataBinding.registerConverter('currency', {
|
||
convert: (value: number) => `${(value * 100).toFixed(1)}%`,
|
||
convertBack: (value: string) => parseFloat(value) / 100
|
||
});
|
||
}
|
||
|
||
// 等级绑定（使用格式化）
|
||
if (this.levelLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.levelLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.FORMAT,
|
||
source: 'level',
|
||
target: 'string',
|
||
format: '等级: {0}'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
}
|
||
|
||
// 分数绑定（使用数字转换器）
|
||
if (this.scoreLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.scoreLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.FORMAT,
|
||
source: 'score',
|
||
target: 'string',
|
||
converter: 'number',
|
||
format: '分数: {0}'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
}
|
||
|
||
// 金币绑定（使用数字转换器）
|
||
if (this.coinsLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.coinsLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.FORMAT,
|
||
source: 'coins',
|
||
target: 'string',
|
||
converter: 'number',
|
||
format: '金币: {0}'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
}
|
||
|
||
// 在线状态绑定
|
||
if (this.onlineStatusLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.onlineStatusLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.FORMAT,
|
||
source: 'onlineStatusText',
|
||
target: 'string',
|
||
format: '状态: {0}'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
}
|
||
|
||
// 显示名称绑定（计算属性）
|
||
if (this.displayNameLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.displayNameLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.REPLACE,
|
||
source: 'displayName',
|
||
target: 'string'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
}
|
||
|
||
// 总资产绑定（计算属性）
|
||
if (this.totalAssetsLabel) {
|
||
const bindingId = this.dataBinding.bind(this.viewModel, this.totalAssetsLabel, {
|
||
type: BindingType.ONE_WAY,
|
||
mode: BindingMode.FORMAT,
|
||
source: 'totalAssets',
|
||
target: 'string',
|
||
converter: 'number',
|
||
format: '总资产: {0}'
|
||
});
|
||
this.bindingIds.push(bindingId);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设置按钮事件
|
||
*/
|
||
private setupButtonEvents(): void {
|
||
// 增加分数按钮 - 直接调用方法
|
||
if (this.addScoreButton) {
|
||
this.addScoreButton.node.on(Button.EventType.CLICK, () => {
|
||
this.viewModel.executeCommand('addScore');
|
||
});
|
||
}
|
||
|
||
// 增加金币按钮 - 使用命令系统，支持 canExecute 检查
|
||
if (this.addCoinsButton) {
|
||
this.addCoinsButton.node.on(Button.EventType.CLICK, () => {
|
||
// 检查命令是否可以执行
|
||
if (this.viewModel.canExecuteCommand('addCoins')) {
|
||
this.viewModel.executeCommand('addCoins');
|
||
} else {
|
||
console.log('等级太低，无法获得金币！');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 升级按钮 - 使用命令系统，支持 canExecute 检查
|
||
if (this.levelUpButton) {
|
||
this.levelUpButton.node.on(Button.EventType.CLICK, () => {
|
||
// 检查命令是否可以执行
|
||
if (this.viewModel.canExecuteCommand('levelUp')) {
|
||
this.viewModel.executeCommand('levelUp');
|
||
} else {
|
||
console.log('分数不足，无法升级！');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 切换在线状态按钮 - 直接调用方法
|
||
if (this.toggleOnlineButton) {
|
||
this.toggleOnlineButton.node.on(Button.EventType.CLICK, () => {
|
||
this.viewModel.toggleOnlineStatus();
|
||
});
|
||
}
|
||
|
||
// 重置按钮 - 直接调用方法
|
||
if (this.resetButton) {
|
||
this.resetButton.node.on(Button.EventType.CLICK, () => {
|
||
this.viewModel.resetUserData();
|
||
});
|
||
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 手动更新用户信息（演示用）
|
||
*/
|
||
public updateUserInfo(): void {
|
||
// 可以通过代码直接修改 ViewModel 的属性
|
||
// 绑定的 Label 会自动更新
|
||
this.viewModel.userName = '测试用户' + Math.floor(Math.random() * 1000);
|
||
this.viewModel.level = Math.floor(Math.random() * 50) + 1;
|
||
this.viewModel.score = Math.floor(Math.random() * 10000);
|
||
this.viewModel.coins = Math.floor(Math.random() * 1000);
|
||
this.viewModel.isOnline = Math.random() > 0.5;
|
||
}
|
||
|
||
/**
|
||
* 获取当前 ViewModel
|
||
*/
|
||
public getViewModel(): UserInfoViewModel {
|
||
return this.viewModel;
|
||
}
|
||
|
||
onDestroy() {
|
||
// 清理绑定
|
||
for (const bindingId of this.bindingIds) {
|
||
this.dataBinding.unbind(bindingId);
|
||
}
|
||
this.bindingIds = [];
|
||
|
||
// 销毁 ViewModel
|
||
if (this.viewModel) {
|
||
this.viewModel.destroy();
|
||
}
|
||
}
|
||
}
|