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

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

昔竹

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

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/lj454802765/article/details/51794325

extjs5 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义视图类，用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 :{serverPathData}',
    	lazy:false
    }
});

Ext.application({
    name: 'MyApp',

    launch: function() {
        //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
        var textField = Ext.widget({xtype:'TestField',renderTo:Ext.getBody()});
		var vm = textField.getViewModel();
        console.log(textField.getFieldLabel());
        console.log("1vm",vm.get("serverPathData"));
        vm.set('serverPathData', '123');
        vm.notify();//vm到视图的更新，需要手动notify，去掉这句就会导致console中的  <span style="font-family: Arial, Helvetica, sans-serif;">2c null</span>
        console.log("2vm",vm.get("serverPathData"));
        console.log("2c",textField.getServerPath());
        textField.setServerPath("456");//vm到视图会自动更新
        console.log("3vm",vm.get("serverPathData"));
        console.log("3c",textField.getServerPath());
        setTimeout(function(){console.log(textField.getFieldLabel());});
    }

});

>>
1vm 
2vm 123
2c 123 //如果没有vm.notify()则是 2c null
3vm 456
3c 456
label :123