[Ext JS6]视图模型和数据绑定| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS6]视图模型和数据绑定

## [Ext JS6]视图模型和数据绑定
### ViewModel
ViewModel是一个管理数据对象的类， 它运行对它感兴趣的组件绑定它并在变化的时候得到通知。ViewModel和ViewController一样，是属于某个 View的。子视图可以继承父的视图模型。
使用 bind的配置来绑定数据，当数据发生改变时，会调用对应的 setter方法。
### 组件绑定
组件是数据绑定的主要方式。
绑定的配置需要有setter方法，比如Panel 的title配置，title有setTitle()方法， 所有可以绑定数据。
以width为例（有setWidth()方法）
```javascript
Ext.create('Ext.panel.Panel', {  
	title: 'Simple Form',   
	viewModel: { 
	type: 'test'  // we will define the "test" ViewModel soon   
	}, 
	bind: { 
		html: '
		Hello {name}',   
		width: '{someWidth}'  
}});
```

这里绑定的语法类似于Ext.Template。
如果绑定布尔类型的值的话，
```javascript
bind: {         
	hidden: '{!name}'  // negated     
}
```

name也可是一个String类型。
绑定的优先级
数据绑定一般要优先于静态配置。
子组件的绑定
一个组件的所有子组件可以访问这个组件的 viewModel
看实例：
```javascript
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}'  
}]});
```

### 双向绑定
双向绑定意味着视图和模型的数据实时同步。 视图的数据改变自动写到模型中。这回自动更新绑定到同一数据的其他组件。
需要注意的是并不是所有的配置都会将其更改发布到 ViewModel。
定义publish和twoWayBindable会将改动写回ViewModel。使用publishState方法也可以在组件和应用逻辑之间发布数据。
publish和twoWayBindable是组件的配置项。支持一个或多个属性。看个例子：
View Model

实例效果如下：
![](/upload/picture/2022-10-09/upload_e8aa3e7fa143269760771d9e8d2a8c0d.png)

标题的显示和按钮是否显示会根据输入框的值动态改变。
也就是：
视图模型的值改变了， 会反应到视图上。
视图上的值进行修改， 视图模型的值也会修改。
绑定和组件状态
某些时候组件的状态， 类似checkbox是否选中或是 Gird中选择一行，对其他的组件会有影响。当一个组件有使用reference?来表示，这个组件会在视图模型中发布一些关键的属性。
```javascript
Ext.create('Ext.panel.Panel', {
	title : 'Login Form',	
	width : 200,	
	viewModel : {	
	},		
	renderTo : Ext.getBody(),
	items : [ {	
		xtype : 'checkbox',	
		boxLabel : 'Manual Login',	
		reference : 'manualLogin'
	}, {	
	xtype : 'textfield',	
	fieldLabel : 'User Name',	
	bind : {			
	disabled : '{!manualLogin.checked}'	
	}		
	} ]	
});
```

之上只有’Manual Login’这个复选框选中， 才可以在输入框中进行输入。
这里虽然viewModel中没有设置， 但是viewModel不能少， 好的做法是定义实际的viewModel类型。
#### 多值绑定
也可以绑定多个值
```javascript
Ext.create('Ext.Component', {  
	bind: {     
	data: {   
	fname: '{firstName}', 
	lname: '{lastName}'       
	}
}});
```

#### 绑定记录
也可以绑定一个Store中的记录
```javascript
Ext.create('Ext.Component', { 
	bind: {     
	data: {     
	reference: 'User',      
	id: 42   
	}  
}})
```

User是Ext.data.Session类型。
#### 关联绑定
```javascript
Ext.create('Ext.Component', {  
	bind: {  
	data: {     
	reference: 'User', 
	id: 42,         
	association: 'address'  
	}   
}});
```

#### 绑定的选项设置
bindTo
绑定一个值后自动断开连接
```javascript
Ext.create('Ext.Component', { 
	bind: {      
	data: {    
	bindTo: '{name}',  
	single: true    
	}  
}});
```

deep-对象属性改变得到通知
```javascript
Ext.create('Ext.Component', {    bind: {        data: {            bindTo: '{someObject}',            deep: true        }    }});
```

### 视图模型公式
公式实例：
```javascript
Ext.define('Osxm.view.FormulasViewMode', {	
	extend: 'Ext.app.ViewModel',	
	alias: 'viewmodel.formulavm',	
	data:{	    
	x:1,	  
	y:2	 
	},	
	formulas: {	 
		x2y: function (get) {
		return get('x2') * get('y');	      
	},	      
	x2: function (get) {	   
		return get('x') * 2;	
	}	   
	}
	});Ext.create('Ext.panel.Panel', {	
		title : 'Formulas View Model',		
		width : 200,	
		viewModel : {	
		type : 'formulavm' 	
	},		
	renderTo : Ext.getBody(),	
	defaultType : 'textfield',
	items : [ {
		xtype : 'textfield',
		fieldLabel : 'x',
		bind : '{x}'
	} ,{	
	xtype : 'textfield',
	fieldLabel : 'y',	
	bind : '{y}'	
	} ,{	
	xtype : 'textfield',	
	fieldLabel : 'x*2',	
	bind : '{x2}'		
	} ,{		
	xtype : 'textfield',
	fieldLabel : 'x*2*y',
	bind : '{x2y}'		
	}]	
});
```

比较好的是使用显式绑定：
```javascript
	   		x3:{	
				bind: {	   
				x: '{x}',	     
				y: '{y}'	
				},	    
				get: function (data) {	  
					return data.x + data.y; //这里是字符串相加	      
				}	  
			}
```

双向公式
可以通过set方法实现双向公式， 类似：
```javascript
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)   
	}); 
	}       
	}  
}});
```

### 开发建议
为避免滥用和内存泄漏， 一些最佳实践：
使用 type来配置使用视图模型
```javascript
Ext.define('MyApp.view.TestView', {
	//...     
	viewModel: { 
	type: 'test'   
	}, 
});
```

1.命名显而易见
2.不必要的话不要在对象中嵌套数据
3.使用子的视图模型，在组件需要的时候可以清理数据
4.非必要，不要创建子视图模型
5使用公式替换重复绑定
6.不要太深
7.公式需要稳定。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS6]视图模型和数据绑定

网站导航