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

我创建了一个小提琴Example

Answer 1

根据documentation

进行直接绑定并且bound属性是一个对象时，通过默认情况下，绑定回调仅在引用时调用变化。这是了解此约束的最有效方法类型，但有时可能需要通知您该对象的属性会发生变化。

为此，我们创建一个“深度绑定”：

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

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

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中的数据访问对象

1 个答案: