ExtJS 5：根据绑定值设置子视图模型数据

Question

我有一个 class，它有自己的视图模型，我在主视图中创建了这个 class 的 2 个实例。在主视图中，我想传递我的 2 个 class 实例的值，但我似乎无法正常工作...我想我只是不理解一些非常简单的概念。

预期的结果是value1 + value2字段有value1和value2的串联，第一个myValue显示value1，第二个myValue显示value2。这是我的代码和 example:

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myView',
      formulas: {
        doSomething: function(getter) {
          console.log(getter('value1'), getter('value2'));
          return getter('value1') + getter('value2');
        }
      }
    });

    Ext.define('MyView', {
      extend: 'Ext.panel.Panel',
      xtype: 'myView',
      viewModel: {
        type: 'myView'
      },
      config: {
        myValue: null
      },
      publishes: {
        myValue: true
      },
      items: [
        {
          xtype: 'displayfield',
          fieldLabel: 'myValue',
          bind: {
            value: '{myValue}'
          }
        }
      ]
    });

    Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [
        {
          xtype: 'displayfield',
          fieldLabel: 'display',
          bind: {
            value: '{doSomething}'
          }
        },
        {
          xtype: 'myView',
          reference: 'view1',
          title: 'View1',
          bind: {
            myValue: '{value1}'
          }
        },
        {
          xtype: 'myView',
          reference: 'view2',
          title: 'View2',
          bind: {
            myValue: '{value2}'
          }
        }
      ],
      viewModel: {
        data: {
          value1: 'Something',
          value2: 'something else'
        }
      }
    })
  }
});

Answer 1

您的第一个 displayField 永远不会 "see" doSomething 公式，因为该公式不是其父级的一部分，因此您需要将公式从 MyViewModel 移动到您的 Ext.container.Container viewModel.

此外，当您发布自定义值时，它将具有 reference.publishedvalue 格式。这应该可以修复您的面板：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.myView'
        });

        Ext.define('MyView', {
            extend: 'Ext.panel.Panel',
            xtype: 'myView',
            viewModel: {
                type: 'myView'
            },
            config : {
                myValue : null
            },
            publishes : ['myValue'], 
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'myValue',
                initComponent : function() {
                    var me = this,
                        owner = me.$initParent || me.initOwnerCt;

                    this.setBind({
                        value: '{' + owner.reference + '.myValue}'
                    });
                    this.callParent();
                }
            }]
        });

        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            viewModel: {
                data: {
                    value1: 'Something',
                    value2: 'something else'
                },
                formulas: {
                    doSomething: function(getter) {
                        console.log(getter('value1'), getter('value2'));
                        return getter('value1') + getter('value2');
                    }
                }
            },
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'display',
                bind: {
                    value: '{doSomething}'
                }
            },{
                xtype: 'myView',
                reference: 'view1',
                title: 'View1',
                bind: {
                    myValue: '{value1}'
                }
            },{
                xtype: 'myView',
                reference: 'view2',
                title: 'View2',
                bind: {
                    myValue: '{value2}'
                }
            }]
        })
    }
});

ExtJS 5：根据绑定值设置子视图模型数据

ExtJS 5: Set child View Model data from bound value

javascript

extjs

mvvm

extjs5