[extjs5]例释概念：数据绑定，config，bind之间的关系

最新推荐文章于 2021-01-14 14:20:00 发布

昔竹

最新推荐文章于 2021-01-14 14:20:00 发布

阅读量4.1k

点赞数

分类专栏： extjs5 文章标签： extjs5 extjs 5 extjs binding bind

本文链接：https://blog.csdn.net/lj454802765/article/details/51794325

版权

本文详细解释了在ExtJS5中数据绑定、config和bind之间的关系。通过配置视图类的成员变量、定义绑定关系以及使用publishes实现双向绑定，实现了视图与ViewModel的数据交互。特别指出，数据从视图到ViewModel的更新是自动的，而ViewModel到视图的更新需要手动调用notify()方法来触发。

摘要由CSDN通过智能技术生成

定义视图类，用Ext.define('xxx',{}),

定义视图类的成员变量，用config:{xxx:123},

定义视图类和vm中的绑定关系，用bind:{xxx:'{yyy}'},yyy指向vm中的data属性的yyy变量

双向绑定视图类和vm中的变量，用publishes:‘xxx’，将xxx和yyy作双向绑定

双向绑定后，需要注意，变量的传递方向是：视图到vm是自动更新的，但是vm到视图的不会自动更新，需要手工vm.notify()

可以理解为数据按从上到下（视图->vm）的方向传递是自动的，但从下往上（vm>视图-）的传递，需要手工触发

例子：

Ext.define('MyApp.viewModel.Test',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test',
    data:{serverPathDat>:''}
});

Ext.define('MyApp.view.TestField',{
    extend: 'Ext.form.field.Text',
    xtype:'TestField',
    viewModel:{type:'test'},
    config:{serverPath:null},
    publishes:'serverPath',
    bind:{
        serverPath:'{serverPathData}',
    	fieldLabel:'label