无法从视图模型中的数据访问对象

Question

我试图将persondetails详细信息获取到enableButton方法中。 我知道我们可以通过简单地向对象添加key和value来实现data。 但我的问题是，有没有办法将数据存储到persondetails中并获取它？

如果我指定如下并相应地绑定，那么它的炒锅很好。

data: {
firstname: '',
lastname: ''
}
bind: {
value: '{lastname}'
},

这是代码：

Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.userinfo',
data: {
persondetails:{
firstname: '',
lastname: ''
}
},
formulas: {
enableButton: function(get){
debugger;
if(get('firstname')!=='' && get('lastname')!=='' ){
return true;
}else{
return false;
}
},
fullName: function(get){
if(get('firstname')!=='' && get('lastname')!=='' ){
return get('firstname') + ' ' + get('lastname');
}
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 500,
bodyPadding: 10,
renderTo: Ext.getBody(),
viewModel:{
type:'userinfo'
},
items: [{
xtype: 'textfield',
name: 'firstname',
emptyText: 'Enter First Name',
bind: {
value: '{persondetails.firstname}'
},
}, {
xtype: 'textfield',
name: 'lastname',
emptyText: 'Enter Last Name',
bind: {
value: '{persondetails.lastname}'
},
}, {
xtype: 'button',
reference: 'clickme',
disabled: true,
bind: {
disabled: '{!enableButton}'
},
text: 'Click',
listeners: {
click: function(){
alert('{fullName}');
}
}
}, {
xtype: 'displayfield',
fieldLabel: 'Full Name',
bind: {
value: '{fullName}'
}
}]
});
}
});

我创建了一个小提琴示例

Answer 1

根据文档

当进行直接绑定并且绑定属性是对象时，由 默认 仅当该引用时才调用绑定回调 变化。这是理解此绑定的最有效方法 类型，但有时您可能需要收到通知，如果有任何 该对象的属性将更改。

为此，我们创建了一个"深度绑定"：

换句话说，如果对象更改其属性，视图模型将不会通知这些更改(尽管其属性已正确更改(。

如果需要侦听此更改，则需要使用深度绑定

Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.userinfo',
data: {
persondetails: {
firstname: '',
lastname: ''
}
},
formulas: {
enableButton: {
bind: {
bindTo: '{persondetails}',
deep: true // listen to any change in personaldetails
},    
get: function (data) {
return data.firstname && data.lastname
}
},
fullName: {
bind: {
bindTo: '{persondetails}',
deep: true // listen to any change in personaldetails
},    
get: function (data) {
return data.firstname + ' ' + data.lastname
}
},
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 500,
bodyPadding: 10,
renderTo: Ext.getBody(),
viewModel:{
type:'userinfo'
},
items: [{
xtype: 'textfield',
name: 'firstname',
emptyText: 'Enter First Name',
bind: {
value: '{persondetails.firstname}'
},
}, {
xtype: 'textfield',
name: 'lastname',
emptyText: 'Enter Last Name',
bind: {
value: '{persondetails.lastname}'
},
}, {
xtype: 'button',
reference: 'clickme',
disabled: true,
bind: {
disabled: '{!enableButton}'
},
text: 'Click',
listeners: {
click: function(){
alert('{fullName}');
}
}
}, {
xtype: 'displayfield',
fieldLabel: 'Full Name',
bind: {
value: '{fullName}'
}
}]
});
}
});