在之前的文章讲过全局使用viewModel,也讲过浮动层的viewModel双向绑定,还有讲过通过viewModel绑定方法。
但是,对于viewModel向下传递:子控件bind父控件viewModel中的值,甚至孙子辈控件中的某个属性,bind爷爷辈控件viewModel中的值,效果如下图(子控件也可以更改父辈控件viewModel的值)
lookupViewModel方法:
控件对象.lookupViewModel([skipThis]);
当[skipThis]为true时,仅向上查找该控件父辈容器中的viewModel ,不考虑自己的viewModel
当[skipThis]为空时 即 控件对象.lookupViewModel();查找该控件的上级的viewModel
而getViewModel,是仅找自己实例的viewModel,就是说用getViewModel 哪个控件配置了,哪个控件能找到(下面代码有解释)
图中,总共有四层控件:
最外层container,他具有一个顶层的viewModel,其中IsBrowser字段用于向下传递,以来控制子孙辈控件的状态
viewModel: {
data: {
IsBrowser: false,
FirstTxt: '第一层vm'
}
},
还有三个子控件,其中在子控件的button中 改变IsBrowser的值
items: [{
xtype: 'component',
bind: {
html: '当前是{IsBrowser?"浏览态":"新增态"}'
},
}, {
xtype: 'button',
text: '改变状态',
handler: function (sender) {
var vm = sender.getParent().getViewModel();//或采用sender.lookupViewModel()
//因为viewModel配置在button的上级 所以用getViewModel的话要sender.getParent()
var isBrowser = vm.get('IsBrowser');
vm.set('IsBrowser', !isBrowser);
}
}, {
xtype: 'container',
reference:'SecondCt'
}]
这里的container,就是第一层中的referenceKey为SecondCt的子控件container,他也具有一个viewModel,并且在此用defaultListenerScope来限定作用域,在此作用域里,声明一个方法onShow来进行改变第一层中viewModel中IsBrowser的值。
注意:
在onShow中 this指的是当前的container,当前的container必须通过lookupViewModel方法来进行向上查找
{
xtype: 'container',
style: 'border:2px solid red',
reference:'SencondCt',
defaultListenerScope: true,
nameHolder: true,
referenceHolder: true,
viewModel: {
data: {
SonIsBrowser: false,
SecondTxt: '第二层vm'
}
},
onShow(sender) {
const me = this;
var pvm = me.lookupViewModel(true);//查找父辈的viewModel
pvm.set('IsBrowser', !pvm.get('IsBrowser'))//通过set 改变第一层中的viewModel中的值
}
}
也就是第二层的子集,里面包含了第四层 就不再赘述
items: [{
xtype: 'component',
bind: {
html: '第三层控件获取到状态{IsBrowser?"浏览态":"新增态"}'
},
}, {
xtype: 'button',
text: '第二层内的按钮',
handler: 'onShow'
}, {
xtype: 'container',
style: 'border:2px solid blue',
defaultListenerScope: true,
nameHolder: true,
referenceHolder: true,
viewModel: {
data: {
grandsonIsBrowser: false,
ThirdTxt: '第三层vm'
}
},
items: [{
xtype: 'button',
text: '第三层取值',
handler: 'onFourthShow'
}, {
xtype: 'button',
bind: {
text: '第四层{IsBrowser?"浏览态":"新增态"}按钮'
},
// text
style: 'border:2px solid green',
handler: function (sender) {
var vm = sender.lookupViewModel(true);
console.log('第四层获取到值:')
console.log(vm.get('FirstTxt'))
console.log(vm.get('SecondTxt'))
console.log(vm.get('ThirdTxt'))
}
}],
onFourthShow(sender) {
const me = this;
var pvm = me.lookupViewModel(true); //查找上部所有viewModel
console.log('第三层获取到值:')
console.log(pvm.get('FirstTxt'))
console.log(pvm.get('SecondTxt'))
console.log(me.lookupViewModel().get('ThirdTxt'))
}
}],
完整的demo:下载