Extjs5手动搭建MVVM项目demo

ExtJS 是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序。在ExtJS 5中，引入了MVVM（Model-View-ViewModel）架构模式，这是一种用于简化用户界面开发的模式，尤其适合大型、复杂的Web应用。MVVM模式将业务逻辑、数据和用户界面分离，使得代码更易于管理和维护。 MVVM模式的核心概念包括： 1. **Model（模型）**：模型层负责处理应用程序的数据和业务逻辑。在ExtJS 5中，可以使用Store和Model组件来管理数据。Store用来存储数据，它可以连接到各种数据源，如JSONP、Ajax或本地存储。Model定义了数据字段和验证规则，与Store中的数据进行交互。 2. **View（视图）**：视图是用户看到和与之交互的部分，包括按钮、表格、面板等组件。在ExtJS中，视图由各种组件和布局构成。视图通常通过数据绑定与ViewModel关联，无需直接操作Model。 3. **ViewModel（视图模型）**：ViewModel是模型和视图之间的桥梁，它提供了一个可观察的对象，用于绑定视图和模型。在ViewModel中，你可以定义计算属性、监听器以及方法，这些都可用于处理数据转换、事件处理等任务。 手动搭建一个ExtJS 5的MVVM项目，你需要遵循以下步骤： 1. **设置环境**：首先确保安装了Sencha CMD工具，它是ExtJS的命令行工具，用于生成项目结构、编译SASS样式和压缩JavaScript代码。 2. **创建新项目**：使用Sencha CMD生成一个新的ExtJS项目。例如，执行`sencha generate app MyApp ./myapp`，这会在当前目录下创建一个名为`myapp`的新项目。 3. **配置MVVM**：在项目的`app`目录下，创建`view`和`viewModel`目录。在`view`目录中，定义你的视图组件，如`MyApp.view.Test1`。在`viewModel`目录中，创建对应的ViewModel，如`MyApp.viewModel.Test1ViewModel`。 4. **定义ViewModel**：在ViewModel类中，使用`bind`方法定义数据绑定，例如`this.bind('{model.data}', this.updateUI);`，这里的`model.data`是Model中的数据，`updateUI`是更新视图的方法。 5. **创建View**：在视图组件中，使用`viewModel`配置项指定ViewModel，例如`viewModel: {type: 'test1ViewModel'}`。然后，通过`xbind`指令将ViewModel的属性绑定到视图元素，如`{xbind: 'name'}`。 6. **数据加载**：配置Store并连接到Model。在ViewModel中，你可以通过Store的`load`方法加载数据，如`this.getStore('Test1Store').load();`。 7. **运行项目**：启动开发服务器，通过`sencha app watch`命令，然后在浏览器中访问`http://localhost:1841/`查看你的应用。 这个`test1`文件可能是你的示例项目的一部分，可能包含了一个简单的视图和ViewModel的实现。通过阅读和理解其代码，你可以更好地了解MVVM模式在ExtJS 5中的应用。 总结来说，ExtJS 5的MVVM模式提供了一种高效、灵活的方式来组织和管理Web应用的代码，降低了视图和模型之间的耦合。通过手动搭建MVVM项目，开发者可以更专注于业务逻辑和用户体验，而不是繁琐的DOM操作。