viewModel是一個爲頁面提供數據交互的模型,通常和bind進行同時使用
一般可以爲組件聲明下viewmodel的屬性
viewModel:{
data:{
key:value
}
}
這個主要是爲 其設置了viewModel的組件,的子組件,提供相應的綁定數據。
就是下面的結構
{
xtype:'組件1',
viewModel:{
data:{
key1:value
}
},
items:[
//這裏的組件 可以使用bind 來綁定key1
]
},
{
xtype:'組件2',
bind:'{key1}' //這裏就會報錯,無法調用viewModel
}
如果是想要全局的使用,我們可以設一個viewport的viewModel
First
在view文件夾下放一個viewport文件夾,並把對應viewModel.js放在裏面
定義一個全局的viewModel
Ext.define('MyApp.view.viewport.ViewportModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewport_model',
data: {
num:0
},
});
Second
引用此ViewportModel
在application裏的viewport配置項中聲明此viewportModel
Third
在其他view組件中bind viewmodel裏data裏的key
{
xtype:'組件',
bind:{
組件的屬性:'{viewModel中data裏的key}',
}
},
ForExample
{
xtype:'textfield',
bind:{
value:'{num}',
}
},
當然,也可以加入簡單的三目運算
{
xtype:'textfield',
bind:{
value:'{ num == 2 ? "已成功登錄2次":"登錄次數:"+num}',
}
}
若是在組件中想要獲取對應的viewModel,使用
viewcontroller對象.getViewModel()
獲取對應的數據對象就是
viewModel對象.getData()//獲取整體數據對象
viewModel對象.getData().key//獲取data裏的具體的key值
若是更新viewModel中某個key值使用
viewModel對象.setData({key:value})
這裏有個具體的完整的例子,是路由+全局viewmodel的