本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38612721](http://blog.csdn.net/sushengmiyan/article/details/38612721)
本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan)
-------------------------------------------------------------资源链接-----------------------------------------------------------------------
翻译来源：[http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html](http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html)[](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar)
API Docs：[http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.app.ViewModel](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.app.ViewModel)
------------------------------------------------------------------------------------------------------------------------------------------------
# 组件绑定
数据绑定（DataBinding）和视图模型（ViewModel）是Ext JS5 新增的强大特性。它们俩可以让你写最少的代码和使用声明类型的风格来帮助你解耦管理。
一个ViewModel就是一个类，这个类管理数据对象。它允许对数据感兴趣的组件来绑定它，并且当发生变化的时候会自动通知到。视图模型（ViewModel）像ViewController一样是被视图View拥有的一个引用。因为视图模型（ViewModel）和视图有关系，在组件继承关系中，祖先拥有的视图模型自雷也可以去连接。这就允许子类可以简单继承父类。
组件拥有一个bind配置属性，允许关联任何从ViewModel中来的配置数据。使用bind，你可以很确定的，组件配置的setter方法会在数值变化的时候自动绑定，不需要你自己写事件处理。
在本指南中，我们可以通过几个例子来了解一下ViewModels和DataBinding的强大功能。
或许最好的了解Binding和ViewModels的方法就是看你在组件上使用的不同的绑定方法。这是因为，组件是数据绑定的原始用户，组件是被Ext JS的开发者熟知的。为了可以进行binding操作，我们需要先创建一个ViewModel以便于我们可以后期引入。
### 绑定和配置（Binding and Configs）
给组件绑定数据就是一个将Ext.app.ViewModel连接到组件的配置属性去的一个过程。只要有一个setter方法，任何组件的配置都可以被绑定，例如，在Ext.app.panerl.Panel类中有一个setTitle方法，你就可以绑定title配置。
下面的例子，我们给基于ViewModel的panel配置数据，我们可以讲我们的数据绑定到width因为有setWidth方法。
~~~
Ext.create('Ext.panel.Panel', {
title: 'Simple Form',
viewModel: {
type: 'test' // 稍后定义test这个ViewModel
},
bind: {
html: '<p>Hello {name}</p>',
width: '{someWidth}'
}
});
~~~
绑定数据用到的语法和Ext.Template是类似的，你可以江text文本放置在花括号里面，你也可以使用格式化fomatters。不像Ext.Template,当只传入一个像‘{someWidth}的时候不会被转化成字符串。
我们稍后会看到，name和somewidth是如何定义的。’上面的例子就是简单地展示了，数据是如何被组件使用的。
绑定布尔数据配置
像 可见性isible,可用性disable,选中状态checked还有按钮的按下状态pressed是需要配置布尔属性的。看下面的例子：
~~~
Ext.create('Ext.panel.Panel', {
title: 'Simple Form',
viewModel: {
type: 'test'
},
items: [{
xtype: 'button',
bind: {
hidden: '{!name}' // negated
}
}]
});
~~~
当按钮按下的时候，数值就被传入到setHidden方法中了，所以传入的是单个的时候，是不会被解释成字符串的，这就是一个原因。
### 绑定和优先级
绑定配置属性会覆盖之前静态定义的，但是也有可能就是会存在一点点的延迟。
~~~
Ext.create('Ext.panel.Panel', {
title: 'Simple Form',
viewModel: {
type: 'test'
},
bind: {
title: 'Hello {name}'
}
});
~~~
一旦定义了name绑定，那么‘Simple Form’标题就会被替换。
### 绑定和子控件
绑定最有用的部分之一就是容器有的数据，子组件都可以获取。下面的例子，你可以看到，viewmodel的子组件绑定了父容器的数据。
~~~
Ext.create('Ext.panel.Panel', {
title: 'Simple Form',
viewModel: {
type: 'test'
},
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
bind: '{firstName}' // uses "test" ViewModel from parent
},{
fieldLabel: 'Last Name',
bind: '{lastName}'
}]
});
~~~
### 绑定的两种方式
绑定属性也允许两种方式的绑定数据。在视图上修改的数据可以立刻返回到模型中。绑定到这个数据的组件都会被更新。
在上面的例子中，因为‘firstName’和‘lastname’属性石被text绑定的，在输入框中的变化会及时通知到后面的ViewModel,为了看清楚具体怎么连接的，我们有必要补充完成例子。
~~~
Ext.define('TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test', // connects to viewModel/type below
data: {
firstName: 'John',
lastName: 'Doe'
},
formulas: {
// We'll explain formulas in more detail soon.
name: function (get) {
var fn = get('firstName'), ln = get('lastName');
return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
}
}
});
Ext.define('TestView', {
extend: 'Ext.panel.Panel',
layout: 'form',
// Always use this form when defining a view class. This
// allows the creator of the component to pass data without
// erasing the ViewModel type that we want.
viewModel: {
type: 'test' // references alias "viewmodel.test"
},
bind: {
title: 'Hello {name}'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
bind: '{firstName}'
},{
fieldLabel: 'Last Name',
bind: '{lastName}'
},{
xtype: 'button',
text: 'Submit',
bind: {
hidden: '{!name}'
}
}]
});
Ext.onReady(function () {
Ext.create('TestView', {
renderTo: Ext.getBody(),
width: 400
});
});
~~~
当上面的面板被展示的时候，我们可以看到输入框中的变化被反射到面板的标题了，还可以看到提交按钮的状态。
### 绑定组件状态
有时候，组件的状态如选择框的checked或者表格的选中状态是其它组件关心的事情。当一个组件设置了reference去识别的时候，这个组件就在ViewModel中被大众化的。
在下面的例子中，我们有一个admin key输入框，状态呢是有选择框的选中状态决定的。这种行为时动态窗体适合的：
~~~
Ext.create('Ext.panel.Panel', {
title: 'Sign Up Form',
viewModel: {
type: 'test'
},
items: [{
xtype: 'checkbox',
boxLabel: 'Is Admin',
reference: 'isAdmin'
},{
xtype: 'textfield',
fieldLabel: 'Admin Key',
bind: {
disabled: '{!isAdmin.checked}'
}
}]
});
~~~
### 绑定描述
到目前为止，我们可以看到三种基本的表格绑定描述：
{firstName}:这是直接从视图模型传过来的，没有被修改，可以是任何类型。
Hello{name}:可以插入字符
{!isAdmin.checked}可以使有负的标志，即 反，非得概念。
除了以上三种方法还有其他比较少用的方式
### 多绑定
~~~
Ext.create('Ext.Component', {
bind: {
data: {
fname: '{firstName}',
lname: '{lastName}'
}
}
});
~~~
绑定了firstname和lastname
### 绑定记录
像可以找到id=42的用户记录绑定
~~~
Ext.create('Ext.Component', {
bind: {
data: {
reference: 'User',
id: 42
}
}
});
~~~
这需要用到Ext.data.Session
### 关联绑定
看user的adress属性
~~~
Ext.create('Ext.Component', {
bind: {
data: {
reference: 'User',
id: 42,
association: 'address'
}
}
});
~~~
在这个例子中，跟上面记录绑定是类似一样的。
### 绑定操作
下面展示了只绑定一次就销毁的例子。使用的single操作
~~~
Ext.create('Ext.Component', {
bind: {
data: {
bindTo: '{name}',
single: true
}
}
});
~~~
使用deep操作来绑定引用操作的更新
~~~
Ext.create('Ext.Component', {
bind: {
data: {
bindTo: '{someObject}',
deep: true
}
}
});
~~~
# 创建 视图模型ViewModels
上面了解了如何绑定，现在是时候学习ViewModel和它提供的功能了。
像之前表述的一样，ViewModel是管理底层数据的对象。
### 规则 Formulas
为了捆绑数据，视图模型提供了方便的方式去计算数据通过的就是formulas，者方便你在视图中只关注生命结构，不必关注数据依赖。
换句话说，通过这个Formulas数据可以在不修改的情况下显示不同的数值。
~~~
Ext.define('TestViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test2',
formulas: {
x2y: function (get) {
return get('x2') * get('y');
},
x2: function (get) {
return get('x') * 2;
}
}
});
~~~
### 公式与显式绑定
在上面的例子中,公式的相关性被发现通过检查函数,然而,这并不总是最好的解决方案。可以使用一个显式绑定声明,这将返回一个简单的对象当所有的值绑定的。
~~~
Ext.define('TestViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test2',
formulas: {
something: {
bind: {
x: '{foo.bar.x}',
y: '{bar.foo.thing.zip.y}'
},
get: function (data) {
return data.x + data.y;
}
}
}
});
~~~
- 前言
- [EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
- [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
- [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录
- [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
- [ExtJS5学习笔记]第十四节 Extjs5中data数据源store和datapanel学习
- [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好？panel的frame属性在作怪
- [ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
- [ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
- [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法，动态创建并加载组件
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
- [ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
- [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
- [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word =&gt; debugger;)
- [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器
- [ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结