Bind Descriptors 绑定描述符
官方定义:“绑定描述符”是一个描述所需数据的值(字符串、对象或数组)。ViewModel中的任何数据都可以用绑定描述符来描述。
Textual Bind Descriptors 文本描述符
类似vue中的模板语法
Two-Way Descriptors 双向描述符
可实现vue中watch类似的效果
# 连接vm中s,当s发生变化时打印s
var binding = viewModel.bind('{s}', function(s) { console.log('s=' + s); });
# 设置vm中s的值为'abc' 相当于viewModel.setValue('s', 'abc')
binding.setValue('abc');
常用**
Ext.Component几乎是所有组件的父组件,都拥有该配置项 bind
类似vue中的v-model
bind: 值为string时表示绑定在组件的 defaultBindProperty
指定的属性上 一般为value
# 创建一个组件,包含一个子组件textfield,textfield的值绑定viewModel中的's'
Ext.widget({
items: [{
xtype: 'textfield',
bind: '{s}' // a two-way / direct bind descriptor
}]
});
Object and Array Descriptors / Multi-Bind 对象和数组描述符 / 多绑定
// 定义viewModel
viewModel: {
data: {
user: {
name: '张三',
phone: {
brand: '华为',
model: 'mate 60 Pro',
slogan: '遥遥领先'
}
}
}
}
// 使用 对象
viewModel.bind({
userName: '{user.name}',
phoneInfo: {
name: '{user.phone.brand} {user.phone.model}',
slogan: '{user.phone.slogan}'
}
}, function(val){
// callback
/** val: {
userName: '张三',
phoneInfo: {
name: '华为 mate60 Pro',
slogan: '遥遥领先'
}
}**/
})
// 使用 数组
viewModel.bind(['{user.name}','{user.phone}'], function(val){
// callback
/** val: ['张三', {
brand: '华为',
model: 'mate 60 Pro',
slogan: '遥遥领先'
}]**/
})
个例
当 bind()
第一个参数为对象
时,且有'bindTo'
属性时
bindTo
的值为实际描述符, 且对象内可设置option
配置项 (option 取决于binding 的类型)
viewModel.bind({
bindTo: '{x}',
single: true
},
function (x) {
console.log('x: ' + x); // only called once
});
viewModel
data
该对象保存填充ViewModel的任意数据,然后可用于绑定。
viewModel: {
data: {
title: '标题',
user: {
name: '张三',
age: 22
},
array: [1,2,3]
}
}
stores
Ext.data.Store配置的声明,首先作为绑定处理以产生有效的存储配置。
viewModel: {
stores: {
// type 创建方式
gridStore: {
type: 'xxxStore',
autoLoad: true
},
// Ext.create() 创建方式
treeStore: Ext.create('Xxx.xxx.XxxStore', {autoLoad: true})
}
}
formulas
类似vue中的计算属性computed ,特点也差不多,有缓存,可以是对象(get + set)/ 函数(get)
viewModel: {
data: {
firstName: '张',
lastName: '三'
},
formulas: {
// 第一个参数为get函数, 可以获取viewModel中的值
fullName: function(get) {
// 返回值为 fullName 的值
return get('firstName') + '-' + get('lastName');
},
// 以上方式只能取fullName的值
// 配置为对象
fullName2: {
// 如果公式只需要生成初始值,则可以将其标记为single。
// single: true
// 可显示指定需要监视的值, 替换get方法中的参数get
// bind: {firstName: '{firstName}', lastName: '{lastName}'}
// get: function(val) {
// let {firstName, lastName} = val;
// ......
// }
get: function(get){
// 返回值为 fullName 的值
return get('firstName') + '-' + get('lastName');
},
set: function(newVal, oldVal){
// this 指向 viewModel实例
let array = newVal.split('-');
this.set({
firstName: array[0],
lastName: array[1]
})
}
}
}
}
viewController
与viewModel
一样是component
的配置项, 且可管理对应组件及其子组件
简单使用:
Ext.define('MyView', {
extend: 'Ext.Panel',
controller: {
onAddClick(btn, event) {
Ext.Msg.alert('Add', 'The Add button was clicked');
// 该方法中this指向btn对象
},
control: {
'button': {
click: function(btn, event){
// 该方法中this指向controller对象
}
}
}
},
items: [
{
xtype: 'button',
text: 'Add',
handler: 'onAddClick', // calls controller's onAddClick method
}
]
});
viewController中提供了以下四个方法应对视图的关键点任务:
beforeInit
:在视图的 initComponent
之前执行
init
: 在视图的 initComponent
之后执行
initViewModel
: 在视图模型创建之后执行
destory
: 销毁时执行, 通常跟随视图的销毁而销毁