UI5的Data binding

学习了解一下UI5的数据binding

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

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

1. Property binding
2. Aggregation binding
3. 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);
        },

测试运行：

• Aggregation binding

可以根据模型的数据来自动创建列表形式的子组件。

demo数据JSON文件，包含了几个员工的薪资数据：

[
    {
   
        "id":