【层级结构】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、双向公式需稳定（可逆推）。