更新mvvm示例

extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestView.ts

@@ -0,0 +1,87 @@
+import { _decorator, Component, Label, Button } from 'cc';
+import { DataBinding, BindingType, BindingMode } from '@esengine/mvvm-ui-framework';
+import { TestViewModel } from './TestViewModel';
+
+const { ccclass, property } = _decorator;
+
+@ccclass('TestView')
+export class TestView extends Component {
+    
+    @property(Label)
+    testLabel: Label = null!;
+
+    @property(Button)
+    testButton: Button = null!;
+
+    private viewModel: TestViewModel;
+    private dataBinding: DataBinding;
+    private bindingId: string = '';
+
+    onLoad() {
+        console.log('TestView onLoad');
+        
+        // 初始化数据绑定系统
+        this.dataBinding = DataBinding.getInstance();
+        
+        // 创建 ViewModel
+        this.viewModel = new TestViewModel();
+        console.log('创建 ViewModel:', this.viewModel);
+        
+        // 手动添加观察者来测试
+        this.viewModel.addObserver('testValue', (newValue, oldValue, property) => {
+            console.log(`属性 ${property} 变化: ${oldValue} -> ${newValue}`);
+            if (this.testLabel) {
+                this.testLabel.string = '测试值: ' + newValue;
+                console.log('手动更新 Label 文本:', this.testLabel.string);
+            }
+        });
+        
+        // 设置数据绑定
+        this.setupDataBinding();
+        
+        // 设置按钮事件
+        this.setupButtonEvent();
+        
+        // 测试初始值
+        console.log('初始值:', this.viewModel.testValue);
+    }
+
+    private setupDataBinding(): void {
+        if (this.testLabel) {
+            console.log('设置数据绑定');
+            console.log('Label 对象:', this.testLabel);
+            console.log('Label 初始文本:', this.testLabel.string);
+            
+            this.bindingId = this.dataBinding.bind(this.viewModel, this.testLabel, {
+                type: BindingType.ONE_WAY,
+                mode: BindingMode.FORMAT,
+                source: 'testValue',
+                target: 'string',
+                format: '测试值: {0}'
+            });
+            console.log('绑定ID:', this.bindingId);
+            
+            // 手动测试一下绑定是否工作
+            this.testLabel.string = '测试值: ' + this.viewModel.testValue;
+            console.log('手动设置后的文本:', this.testLabel.string);
+        }
+    }
+
+    private setupButtonEvent(): void {
+        if (this.testButton) {
+            this.testButton.node.on(Button.EventType.CLICK, () => {
+                console.log('按钮点击');
+                this.viewModel.addValue();
+            });
+        }
+    }
+
+    onDestroy() {
+        if (this.bindingId) {
+            this.dataBinding.unbind(this.bindingId);
+        }
+        if (this.viewModel) {
+            this.viewModel.destroy();
+        }
+    }
+} 

extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "667e05c4-fdf7-4b08-8c65-57e085465210",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestViewModel.ts

@@ -0,0 +1,38 @@
+import 'reflect-metadata';
+import { ViewModel, observable } from '@esengine/mvvm-ui-framework';
+
+/**
+ * 简单的测试 ViewModel
+ */
+export class TestViewModel extends ViewModel {
+    
+    public get name(): string {
+        return 'TestViewModel';
+    }
+
+    @observable
+    testValue: number = 0;
+
+    public addValue(): void {
+        console.log('添加值之前:', this.testValue);
+        console.log('notifyObservers 方法存在吗?', typeof this.notifyObservers);
+        
+        // 检查属性描述符
+        const descriptor = Object.getOwnPropertyDescriptor(this, 'testValue') || 
+                          Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'testValue');
+        console.log('testValue 属性描述符:', descriptor);
+        
+        // 检查私有属性
+        console.log('_testValue 私有属性:', (this as any)._testValue);
+        
+        this.testValue += 1;
+        console.log('添加值之后:', this.testValue);
+        console.log('_testValue 私有属性 (之后):', (this as any)._testValue);
+        
+        // 手动触发通知测试
+        if (this.notifyObservers) {
+            console.log('手动触发通知');
+            this.notifyObservers('testValue', this.testValue, this.testValue - 1);
+        }
+    }
+} 

extensions/cocos/cocos-ecs/assets/scripts/mvvm/TestViewModel.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "28999657-2992-4293-839b-101ae666b364",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoView.ts

@@ -0,0 +1,257 @@
+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();
+        }
+    }
+} 

extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "0a14765b-2165-4fba-b286-00ba485caa11",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoViewModel.ts

@@ -0,0 +1,128 @@
+import { ViewModel, observable, computed, command, viewModel } from '@esengine/mvvm-ui-framework';
+
+/**
+ * 用户信息视图模型
+ * 展示如何使用 MVVM 框架进行数据绑定
+ */
+@viewModel
+export class UserInfoViewModel extends ViewModel {
+    
+    public get name(): string {
+        return 'UserInfoViewModel';
+    }
+
+    /**
+     * 用户名 - 使用 @observable 装饰器自动处理数据绑定
+     */
+    @observable
+    userName: string = '未知用户';
+
+    /**
+     * 用户等级
+     */
+    level: number = 1;
+
+    /**
+     * 用户分数
+     */
+    @observable
+    score: number = 0;
+
+    /**
+     * 用户金币
+     */
+    @observable
+    coins: number = 100;
+
+    /**
+     * 是否在线
+     */
+    @observable
+    isOnline: boolean = false;
+
+    /**
+     * 计算属性：用户显示名称（格式化）
+     */
+    @computed(['userName', 'level'])
+    get displayName(): string {
+        return `${this.userName} (Lv.${this.level})`;
+    }
+
+    /**
+     * 计算属性：在线状态文本
+     */
+    @computed(['isOnline'])
+    get onlineStatusText(): string {
+        return this.isOnline ? '在线' : '离线';
+    }
+
+    /**
+     * 计算属性：总资产（分数 + 金币）
+     */
+    @computed(['score', 'coins'])
+    get totalAssets(): number {
+        return this.score + this.coins;
+    }
+
+    /**
+     * 增加分数 - 使用 @command 装饰器，可以通过 executeCommand('addScore') 调用
+     */
+    @command()
+    public addScore(amount: number = 10): void {
+        this.score += amount;
+    }
+
+    
+
+    /**
+     * 增加金币 - 带有 canExecute 逻辑的命令
+     */
+    @command('canAddCoins')
+    public addCoins(amount: number = 5): void {
+        this.coins += amount;
+    }
+
+    /**
+     * 检查是否可以增加金币（例如：等级必须大于 1）
+     */
+    public canAddCoins(): boolean {
+        return this.level > 1;
+    }
+
+    /**
+     * 升级 - 带有复杂 canExecute 逻辑的命令
+     */
+    @command('canLevelUp')
+    public levelUp(): void {
+        this.level += 1;
+        this.score += this.level * 100; // 升级奖励
+    }
+
+    /**
+     * 检查是否可以升级（例如：需要足够的分数）
+     */
+    public canLevelUp(): boolean {
+        return this.score >= this.level * 100;
+    }
+
+    /**
+     * 切换在线状态
+     */
+    @command()
+    public toggleOnlineStatus(): void {
+        this.isOnline = !this.isOnline;
+    }
+
+    /**
+     * 重置用户数据
+     */
+    public resetUserData(): void {
+        this.batchUpdate({
+            userName: '新用户',
+            level: 1,
+            score: 0,
+            coins: 100,
+            isOnline: false
+        });
+    }
+} 

extensions/cocos/cocos-ecs/assets/scripts/mvvm/UserInfoViewModel.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "0e90a89e-1c64-4c47-ab61-9093f9964678",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}