UI5的Data binding

最新推荐文章于 2024-08-14 21:18:20 发布

W1nt3rs

最新推荐文章于 2024-08-14 21:18:20 发布

阅读量412

点赞数 2

分类专栏： Fiori

本文链接：https://blog.youkuaiyun.com/starshus/article/details/104732155

版权

本文介绍了UI5作为企业级UI框架中的数据binding概念，重点讲解了Property binding、Aggregation binding和Element binding三种方式，以及双向和单向绑定的原理。通过代码示例展示了如何在UI组件、列表和表单中实现数据与视图的自动同步，强调了学习数据绑定对于提升开发效率的重要性。

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

学习了解一下UI5的数据binding

UI5作为一个成熟的企业级UI开发框架，其最大的特点就是遵循MVC的设计，也就是将代码逻辑清晰地区分为数据源（model） - UI（view） - 应用逻辑（controller）这三部分。数据binding就是model和view之间如何交互。

UI5的数据binding主要有三种方式：

Property binding
Aggregation binding
Element binding

binding有双向和单向。双向，也就是前端数据和数据模型都可以相互实时自动更新。单向，就是从模型的更改会让视图自动显示变化。

Property binding

UI组件的属性和数据模型可以绑定在一起，实现自动同步。

Code Example:

Component.js:

初始化一个model

init: function() {
   
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            var oData = {
   
                recipient: {
   
                    name: "World"
                }

            };
            var oModel = new JSONModel(oData);
            this.setModel(oModel);
            ...
}

View.xml:

通过{/recipient/name}的语法即可自动将数据和视图绑定。

<Button text="hello" press=".onShowHello"/>
            <Input 
                value="{/recipient/name}"
                valueLiveUpdate="true"
                width="60%"
            />

Controller.js:

添加一个事件的监听来测试：

onShowHello: function() {
   

            var sRecipient = this.getView().getModel().getProperty("/recipient/name");
            var sMsg = this.getResourceBundle().getText("helloMsg", sRecipient);
            //this.getResourceBundle().getText("masterTitleCount", [0]),

            // alert("Hello World");
            MessageToast.show(sMsg);
        },