【extjs6学习笔记】1.14 初始: ViewModel

ViewModel是一个管理特定UI组件数据的类。 可以将其视为特定视图的记录容器。 它支持与UI组件的双向数据绑定,只要用户在视图中更改数据,它具有最新的副本。 与模型不同,它不能包含代理,因此它不能直接从远程服务器获取数据。

我们来创建一个带有虚拟数据的简单ViewModel并将其绑定到一个组件。 请考虑以下示例。

在上面的例子中,我们创建了简单的ViewModel类,名为MyApp.view.TestViewModel和Ext.app.ViewModel。别名配置用于给它一个简短的名称,以便我们可以在UI中使用这个简短的名称来查找它。数据配置用于提供样本数据对象。在这里,我们提供了id和name属性的简单对象。 viewmodel类在使用viewmodel类型的viewModel配置的组件中引用。使用bind config将特定的UI配置值与ViewModel的数据绑定。在上面的例子中,组件的html属性用"test"viewmodel数据对象的id和name属性绑定。使用大括号来绑定特定属性,如"{id}"或"{name}"。所以现在,上述组件将显示"1 - Steve"。

时间: 2024-11-10 13:45:00

【extjs6学习笔记】1.14 初始: ViewModel的相关文章

Java程序员的JavaScript学习笔记(14——扩展jQuery UI)

计划按如下顺序完成这篇笔记: Java程序员的JavaScript学习笔记(1--理念) Java程序员的JavaScript学习笔记(2--属性复制和继承) Java程序员的JavaScript学习笔记(3--this/call/apply) Java程序员的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序员的JavaScript学习笔记(5--prototype) Java程序员的JavaScript学习笔记(6--面向对象模拟) Java程序员

Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Ja

QT学习笔记(14) 定时器类DTimer的使用

一. 在前面的学习笔记中,我们已经学习定时器事件http://www.cnblogs.com/blog-ccs/p/7445323.html 现在,我们学习QTimer定时器类,比较优劣. 二.示例代码 widget.h 1 #ifndef WIDGET_H 2 #define WIDGET_H 3 4 #include <QWidget> 5 #include <QTimer>//定时器对象 6 7 namespace Ui { 8 class Widget; 9 } 10 11

java/android 设计模式学习笔记(14)---外观模式

这篇博客来介绍外观模式(Facade Pattern),外观模式也称为门面模式,它在开发过程中运用频率非常高,尤其是第三方 SDK 基本很大概率都会使用外观模式.通过一个外观类使得整个子系统只有一个统一的高层的接口,这样能够降低用户的使用成本,也对用户屏蔽了很多实现细节.当然,在我们的开发过程中,外观模式也是我们封装 API 的常用手段,例如网络模块.ImageLoader 模块等.其实我们在开发过程中可能已经使用过很多次外观模式,只是没有从理论层面去了解它. 转载请注明出处:http://bl

【extjs6学习笔记】1.2 初始:MVC MVVM

模型 这表示数据层.该模型可以包含数据验证和逻辑来保持数据.在 ext js 中, 大多数模型都与一个数据存储一起使用. 视图 这表示用户界面. 是用户在屏幕上看到的组件. 在每次互动的用户与应用程序,组件将发送事件. 控制器 这将处理任何与视图相关的逻辑.视图的事件处理以及任何应用程序逻辑. MVVM 这将封装视图所需的表示逻辑, 将数据绑定到视图, 并在数据更改时处理更新 如果它们被绑定就更容易控制View和Model. 例如,考虑到我们有一个数据网格,我们列出一些联系人. 当我们选择一个联

【extjs6学习笔记】1.8 初始: ExtJS命名约定

Convention for Description Example Class 类名应该在CamelCase中 MyCustomClass 类名应包含字母数字字符. 如果属于技术术语,则允许使用数字. Base64 不要使用下划线,连字符或任何其他非字母数字字符. 类名应至少包含一个由dot(.)分隔的唯一命名空间. TopLevelNamespace.MyClassName 不由Sencha分发的类不应该使用Ext作为顶级命名空间. 顶级命名空间和实际的类名应该在CamelCase中,其他的

【extjs6学习笔记】1.12 初始: Working with DOM

http://www.extjs-tutorial.com/extjs/working-with-dom Ext JS是一个DHTML库. 它通过使用JavaScript创建或操作DOM元素来创建UI. 您可能知道,并不是所有浏览器都使用相同的JavaScript DOM操作方法对DOM元素执行相同的操作. 与DOM创建和操纵有关的跨浏览器问题. 为了解决跨浏览器问题,Ext JS包含以下类来创建或操作DOM元素. Class Description Ext.dom.Element Ext JS

【extjs6学习笔记】1.10 初始: 定义类

http://www.extjs-tutorial.com/extjs/define-new-class-in-extjs

【extjs6学习笔记】1.9 初始: Mixins

Mixin允许我们使用一个类的函数作为另一个类的函数而不继承. Mixins可以使用mixins关键字定义,并将值指定为JSON对象,其中属性的名称应该是要使用的方法的名称,属性的值将是定义方法的类的名称. ----------------------------------------------- http://www.extjs-tutorial.com/extjs/mixins