无法从 ViewModel 中的数据访问对象

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}'
                }
            }]
        });
    }
});

我创建了一个fiddleExample

Answer 1

根据documentation

When a direct bind is made and the bound property is an object, by default the binding callback is only called when that reference changes. This is the most efficient way to understand a bind of this type, but sometimes you may need to be notified if any of the properties of that object change.

To do this, we create a "deep bind":

换句话说，如果一个对象更改了它的属性，viewmodel 不会通知这些更改（尽管它们的属性已正确更改）。

如果你需要监听这个变化，你需要使用深度绑定

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}'
                }
            }]
        });
    }
});

无法从 ViewModel 中的数据访问对象

Not able to access object from data in ViewModel

extjs

viewmodel