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

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

原文：http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html
一、特定的数据绑定方式
1、多项绑定
如果需要绑定一个对象或者数组，视图模型会以同样的结构生成数组或模型，只不过会用不同的属性代替绑定结果。例如：

Ext.create('Ext.Component', {
    bind: {
        data: {
            fname: '{firstName}',
            lname: '{lastName}'
        }
    }
});

这里的data配置就是一个对象，但是值是在视图模型中定义的。

2、档案绑定
当有一个特定的档案，比如“User”的id值为42时。此时的绑定描述是一个对象，但是增加了“reference”属性，比如：

Ext.create('Ext.Component', {
    bind: {
        data: {
            reference: 'User',
            id: 42
        }
    }
});

在这种情况下，绑定
一旦被加载组件的tpl就会接受到User的id值。这种绑定方法得实现目前需要使用到Ext.data.Session.
3、关联绑定
和档案绑定差不多，也有关联数据绑定，比如：

Ext.create('Ext.Component', {
    bind: {
        data: {
            reference: 'User',
            id: 42,
            association: 'address'
        }
    }
});

在这种情况下，绑定
一旦被加载组件的tpl就会接受到User的address值。这种绑定方法得实现目前需要使用到Ext.data.Session.
4、绑定选项
最后一种绑定形式是绑定选项。下面这个例子展示了如何通过接受一个绑定值然后自动断开。

Ext.create('Ext.Component', {
    bind: {
        data: {
            bindTo: '{name}',
            single: true
        }
    }
});

bindTo属性是绑定描述对象中的第二个保留字（第一个是reference）。这表明bindTo是绑定描述符和其他属性配置选项绑定。
另一个绑定选项’deep’，当绑定的对象属性发生变化时，deep这个选项可以让绑定察觉到变化，而不是仅仅引用它自身。当组件经常接受到对象时，这个现象对于绑定data配置恐怕是非常有用的。

Ext.create('Ext.Component', {
    bind: {
        data: {
            bindTo: '{someObject}',
            deep: true
        }
    }
});

二、建立视图模型

1、公式
为了更好的管理数据和提供绑定，视图模型也提供了一个简单的方法去计算数据。这个方法叫做’formulas’。formulas可以封装在视图中的数据依赖关系，也可以保证视图更加专注的描述页面结构。
在之前的例子，有一个’name’公式，用来从视图里连接’firstName’和’lastName’。当然公式也能使用其他公式的结果值，只要这个结果值是另一个数据的属性。

Ext.define('MyApp.view.TestViewModel2', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test2',

    formulas: {
        x2y: function (get) {
            return get('x2') * get('y');
        },

        x2: function (get) {
            return get('x') * 2;
        }
    }
});

x2公式使用了x属性定义了x2(意思为x*2),x2y公式有应用了x2和y。意思是，当x变化时,x2，x2y会被重新计算。但是如果是y变化，就只有x2y会被重新计算。

2、公式和显示绑定
在上面的例子中，公式的依赖关系是通过检查函数得到的（公式的结果是通过函数得到的），然而这并不是最好的做法。使用显示绑定，当所有的值绑定的时候会返回一个简单的对象。

Ext.define('MyApp.view.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;
            }
        }
    }
});

3、双向公式
当公式是可逆的，我们可以在值设置一个set方法调用。指向视图模型得时候，set方法会回调this.set()在视图模型中设置恰当的属性。
下面就是如何用双向公式去定义’name’

Ext.define('MyApp.view.TestViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test',

    formulas: {
        name: {
            get: function (get) {
                var fn = get('firstName'), ln = get('lastName');
                return (fn && ln) ? (fn + ' ' + ln) : (fn || ln || '');
            },

            set: function (value) {
                var space = value.indexOf(' '),
                    split = (space < 0) ? value.length : space;

                this.set({
                    firstName: value.substring(0, split),
                    lastName: value.substring(split + 1)
                });
            }
        }
    }
});

三、建议
如何避免视图模型，公式，数据绑定被滥用。
1、配置视图模型时尽量使用一种写法。

Ext.define('MyApp.view.TestView', {
    //...
    viewModel: {
        type: 'test'
    },
});

2、命名规范易读。
3、嵌套数据勿深。
4、使用子视图模型保持数据干净。
5、在需要的时候才创建子视图模型。
6、用公式代替重复绑定。
7、公式链接勿深。
8、双向公式需稳定（可逆推）。