[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例子