如何将子视图绑定到ExtJs 5中的父视图模型?

时间:2015-02-12 10:20:41

标签: mvvm binding extjs5 view-model-pattern

我需要将子视图绑定到父视图的viewmodel。 我的结构是 -

parentView{
    items : [{
        xtype : 'childview'
    }]
}

parentViewModel{data : NAME}

childview : {
    items : {[
        xtype : 'label',
        bind : {value : '{NAME}'}
    ]}
}

2 个答案:

答案 0 :(得分:2)

实际上,您根本不需要为孩子使用viewModel。 组件链中的所有子视图都可以自然访问父viewModel

Ext.define('APP.view.Main', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    viewModel: {
        data: { 
            title: 'TITLE',
            name: 'NAME'
        }
    },
    bind: { title: '{title}' },
    items: [{ xtype: 'child' }]
});

Ext.define('APP.view.Child', {
    extend: 'Ext.container.Container',
    alias: 'widget.child',
    items: [{
        xtype: 'label',
        bind: { value: '{name}' }
    }]
});

有关详细说明,请参阅the ExtJS guide。 (我真诚地建议阅读所有内容:))。

希望这有点帮助!

答案 1 :(得分:0)

好的,对于初学者来说,绑定的语法是错误的,如果你不需要标记'那么你也可以使用更轻的component.html。表格的xtype。

parentViewModel: {
   data: {
      name: 'Igor'
   }
}

xtype: 'component',
bind: {
   html: '{name}'
}