[ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38612721

本文作者：sushengmiyan

-------------------------------------------------------------资源链接-----------------------------------------------------------------------

翻译来源：http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html

API Docs：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还有button的按下状态pressed是须要配置布尔属性的。看以下的样例：

Ext.create('Ext.panel.Panel', {
    title: 'Simple Form',

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'button',
        bind: {
            hidden: '{!name}'  // negated
        }
    }]
});

当button按下的时候，数值就被传入到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
    });
});

当上面的面板被展示的时候，我们能够看到输入框中的变化被反射到面板的标题了。还能够看到提交button的状态。

绑定组件状态

有时候，组件的状态如选择框的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;
            }
        }
    }
});