盗墓笔记同人小说,雪鹰领主

Ext JS開發(fā)大全

CmsWing

[Ext JS6]視圖模型和數(shù)據(jù)綁定

## [Ext JS6]視圖模型和數(shù)據(jù)綁定
### ViewModel
ViewModel是一個(gè)管理數(shù)據(jù)對(duì)象的類， 它運(yùn)行對(duì)它感興趣的組件綁定它并在變化的時(shí)候得到通知。ViewModel和ViewController一樣，是屬于某個(gè) View的。子視圖可以繼承父的視圖模型。
使用 bind的配置來(lái)綁定數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，會(huì)調(diào)用對(duì)應(yīng)的 setter方法。
### 組件綁定
組件是數(shù)據(jù)綁定的主要方式。
綁定的配置需要有setter方法，比如Panel 的title配置，title有setTitle()方法， 所有可以綁定數(shù)據(jù)。
以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}'  
}});
```

這里綁定的語(yǔ)法類似于Ext.Template。
如果綁定布爾類型的值的話，
```javascript
bind: {         
	hidden: '{!name}'  // negated     
}
```

name也可是一個(gè)String類型。
綁定的優(yōu)先級(jí)
數(shù)據(jù)綁定一般要優(yōu)先于靜態(tài)配置。
子組件的綁定
一個(gè)組件的所有子組件可以訪問這個(gè)組件的 viewModel
看實(shí)例：
```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}'  
}]});
```

### 雙向綁定
雙向綁定意味著視圖和模型的數(shù)據(jù)實(shí)時(shí)同步。 視圖的數(shù)據(jù)改變自動(dòng)寫到模型中。這回自動(dòng)更新綁定到同一數(shù)據(jù)的其他組件。
需要注意的是并不是所有的配置都會(huì)將其更改發(fā)布到 ViewModel。
定義publish和twoWayBindable會(huì)將改動(dòng)寫回ViewModel。使用publishState方法也可以在組件和應(yīng)用邏輯之間發(fā)布數(shù)據(jù)。
publish和twoWayBindable是組件的配置項(xiàng)。支持一個(gè)或多個(gè)屬性。看個(gè)例子：
View Model

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

標(biāo)題的顯示和按鈕是否顯示會(huì)根據(jù)輸入框的值動(dòng)態(tài)改變。
也就是：
視圖模型的值改變了， 會(huì)反應(yīng)到視圖上。
視圖上的值進(jìn)行修改， 視圖模型的值也會(huì)修改。
綁定和組件狀態(tài)
某些時(shí)候組件的狀態(tài)， 類似checkbox是否選中或是 Gird中選擇一行，對(duì)其他的組件會(huì)有影響。當(dāng)一個(gè)組件有使用reference?來(lái)表示，這個(gè)組件會(huì)在視圖模型中發(fā)布一些關(guān)鍵的屬性。
```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’這個(gè)復(fù)選框選中， 才可以在輸入框中進(jìn)行輸入。
這里雖然viewModel中沒有設(shè)置， 但是viewModel不能少， 好的做法是定義實(shí)際的viewModel類型。
#### 多值綁定
也可以綁定多個(gè)值
```javascript
Ext.create('Ext.Component', {  
	bind: {     
	data: {   
	fname: '{firstName}', 
	lname: '{lastName}'       
	}
}});
```

#### 綁定記錄
也可以綁定一個(gè)Store中的記錄
```javascript
Ext.create('Ext.Component', { 
	bind: {     
	data: {     
	reference: 'User',      
	id: 42   
	}  
}})
```

User是Ext.data.Session類型。
#### 關(guān)聯(lián)綁定
```javascript
Ext.create('Ext.Component', {  
	bind: {  
	data: {     
	reference: 'User', 
	id: 42,         
	association: 'address'  
	}   
}});
```

#### 綁定的選項(xiàng)設(shè)置
bindTo
綁定一個(gè)值后自動(dòng)斷開連接
```javascript
Ext.create('Ext.Component', { 
	bind: {      
	data: {    
	bindTo: '{name}',  
	single: true    
	}  
}});
```

deep-對(duì)象屬性改變得到通知
```javascript
Ext.create('Ext.Component', {    bind: {        data: {            bindTo: '{someObject}',            deep: true        }    }});
```

### 視圖模型公式
公式實(shí)例：
```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; //這里是字符串相加	      
				}	  
			}
```

雙向公式
可以通過(guò)set方法實(shí)現(xiàn)雙向公式， 類似：
```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)   
	}); 
	}       
	}  
}});
```

### 開發(fā)建議
為避免濫用和內(nèi)存泄漏， 一些最佳實(shí)踐：
使用 type來(lái)配置使用視圖模型
```javascript
Ext.define('MyApp.view.TestView', {
	//...     
	viewModel: { 
	type: 'test'   
	}, 
});
```

1.命名顯而易見
2.不必要的話不要在對(duì)象中嵌套數(shù)據(jù)
3.使用子的視圖模型，在組件需要的時(shí)候可以清理數(shù)據(jù)
4.非必要，不要?jiǎng)?chuàng)建子視圖模型
5使用公式替換重復(fù)綁定
6.不要太深
7.公式需要穩(wěn)定。

購(gòu)物車

0 ITEMS ON YOUR CART

Ext JS開發(fā)大全

[Ext JS6]視圖模型和數(shù)據(jù)綁定

網(wǎng)站導(dǎo)航