[ExtJS]全局viewModel教程

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的

全局viewModel例子

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章