[ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
最后更新于：2022-04-01 07:36:49
本文地址：[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;
}
}
}
});
~~~