【层级结构】Ext.js5视图模型和数据绑定（上）

非英文专业，同时也是Ext.js的初学者，若您能指出错误和不恰当的地方，万分感谢！

原文：http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html

视图模型和数据绑定（上）
视图模型和数据绑定是Ext.js强有力的新增功能。他们能让你写更少的代码，能够帮助你用更加易于声明的方式去保持关注点分离（解耦管理）。

视图模型是管理数据对象的类。他允许相关联的数据进行绑定并且关注他们的变化。视图模型，和视图控制器一样都属于视图。因为视图模型和视图有联系，所以他们可以连接到父组件下的父视图模型。这就意味着子视图能够从父视图模型继承数据。

组件有一个bind初始化设置，这可以让他们和视图模型有数据上的联系。使用bind，当绑定值改变时都可以保证有相对应的组件配置调用setter方法，不再手动设置事件处理程序了。

在这个说明里面，我们用一些例子来展示视图模型和数据绑定。

组件绑定

最好的方式去理解绑定和视图模型就是去看看不同的绑定组件的方法。这是因为组件在数据绑定中应用广泛，并且大部分开发者也比较熟悉他。为了让bind正常运转，在实际操作中，我们需要先引用视图模型然后再定义他。

绑定和初始化

对组件而言，绑定是将数据从Ext.app.ViewModel连接到组件配置的一个过程。只要有setter方法，任何配置组件都可以绑定。比如，如果Ext.panel.Panel上有个setTitle()的方法，你就能绑定title配置。

在下面这个例子中，我们会根据视图模型中的data来设置我们面板的宽度。我们可以将我们的数据绑定到宽度上只要setWidth()方法可以在Ext.panel.Panel使用。



这个bind的语法和Ext.Template非常相似。你可以将文本放在括号内。你也可以使用格式转换，就和使用Ext.Template一样。但是还是有区别，当模板放在单的花括号内时他的值是可以修改的，也就是说,它不是转换为一个字符串。

我们稍后能看到name和someWidth这些可变的值是如何定义的。上面的这个例子只是简单的展示了数据是如何在组件内绑定的。

绑定布尔值

有些时候你可能需要绑定布尔值，比如visible(或者hidden)、disabled、checked、和pressed。Bind
templates support boolean negation “inline” in the template.Other forms of algebra are relegated to formulas (see below),但是布尔（非）也可以满足一般情况了。比如：



这也突出说明了为什么包含在single
token templates中的值没有转换成字符串。上面的例子中，当“name”是一个字符串得时候，使用“!”否定使得“name”变成布尔值好使得与按钮的setHidden方法匹配。

绑定和优先级

只要绑定结果是有效的，进行的绑定配置属性通常都会覆盖掉组件德静态设置。换句话说，绑定数据的优先级比形态配置值高，不过有时候会在获取数据得时候有一点延迟。



当绑定的“name”获取到值得时候，一开始设置的title属性“Simple
Form”会被替换掉。

绑定和子组件

绑定意向非常有用的地方还有所有的子组件的模型视图可以获得承载他们的容器的数据。

在下面这个例子中，可以看到如何将子组件里的子元素绑定到父容器的视图模型中的。



双向绑定

Ext.js的数据绑定也支持双向绑定，即是说在视图和模型之间能动态传递值。只要数据在视图上有改变就会自动的将改变反应到模型上。这种自动更新可以值得不同的组件绑定相同的数据。注意：不是所有的配置都可以在他们的值发生改变时将改变传递给视图模型。

在配置中使用publish和towWayBindable数组可以将数据的变化传回视图模型。使用publishState方法可以将值传给组件或者应用逻辑中。

在上面的例子中，因为“firstName”和“lastName”属性被绑定在了文本域中，输入框中的变化可以传回视图模型。为了理解他们之间的联系，现在我们来看看整个例子：





通过上的的例子，我们可以看到文本字段的变化反应在了面板的“title”属性和“Submit”按钮的hidden状态上。

绑定和组件状态

有时候组件的状态，比如：单选框的“checked”,表格的“selected”记录，这些状态都会与其他组件产生联系。当一个组件使用“reference”，这个组件就可以将他的一下关键属性传给视图模型。

在这个例子中，我们将“Admin Key”文本域禁用属性配置与单选框的“checked”属性进行绑定。这样，当单选框被选择的时候文本域会被禁用掉。这种行为可以很好得适配到动态表格中，如下：



绑定描述符

到目前为止，我们已经接触到了三种基本形式的绑定描述符：

1、{firstName} 是“直接”的绑定到视图模型中。这些值是没有变化的所以可以是各种类型的值。

2、Hello {name} 一种“绑定模板”，always produces a string by inserting the textual value of the various bind expressions，绑定模板的时候可以使用格式转换，就像使用Ext.Template一样，比如：‘Hello
{name:capitalize}’

3、{!isAdmin.checkede} 一种否定形式的直接绑定，用于绑定布尔配置属性。

除了以上三种基本的绑定方法，还有一些特殊的绑定描述符。