UI5_Data Binding

No Data Binding

在页面上创建一个Text控件如下，text为固定文本

new sap.m.Text({text: "Hi, my name is Harry Hawk"}).
        placeAt("content");

Creating Model

创建JSON Model，并通过setModel方法绑定。创建Text控件时可以用{/greetingText}取出值。

sap.ui.getCore().attachInit(function () {
    // Create a JSON model from an object literal
    var oModel = new sap.ui.model.json.JSONModel({
        greetingText: "Hi, my name is Harry Hawk"
    });
    // Assign the model object to the SAPUI5 core
    sap.ui.getCore().setModel(oModel);
    // Create a text UI element that displays a hardcoded text string
    new sap.m.Text({text: "{/greetingText}"})
        .placeAt("content");
});

Two-Way Data Binding

创建控件如下，两个input控件的enabled属性都绑定到Model，同时CheckBox控件的selected属性也绑定到这个Model，当selected取消勾选时，enabled值变为false，因此input控件的enabled属性值同时更新成false，input控件变为不可输入。

    <content>
      <Label text="First Name" class="sapUiSmallMargin" />
      <Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
      <Label text="Last Name" class="sapUiSmallMargin" />
      <Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
      <CheckBox selected="{/enabled}" text="Enabled" />
    </content>

One-Way Data Binding

创建JSON Model后，oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);将其设为One-Way Data Binding，数据从模型实例到使用者（通常控件的属性）单向传输，使用者值改变后不返回给模型实例。如下例子中，将selected取消勾选时，enabled模型值没有更新，input控件的enabled属性值仍为true。

Resource Models

创建 /i18n/i18n.properties 文件，在script中创建ResourceModel并绑定。

      var oResourceModel = new sap.ui.model.resource.ResourceModel({
        bundleName : "sap.ui.demo.db.i18n.i18n"
      });
      sap.ui.getCore().setModel(oResourceModel, "i18n");

在xml view中，可以通过text="{i18n>firstName}"来读取。url添加后缀?sap-language=de可以显示相应的语言

Accessing Properties in Hierarchically Structured Models

通过'/'访问Model中的层级 text="{/address/street}\n{/address/zip} {/address/city}\n{/address/country}"

Formatting Values

新建Link控件，parts为传入的参数，是由path对象组成的数组，formatter为触发的事件，带上parts中的参数，.formatMail前面的点号表示当前controller下寻找，没有点号表示寻找全局。

<Link class="sapUiSmallMarginBegin"
        href="{
                parts: [
                    '/firstName',
                    '/lastName'
                ],
                formatter: '.formatMail'
            }"
        text="{i18n>sendEmail}"/>

controller中定义事件的实现方法

    return Controller.extend("sap.ui.demo.db.controller.App", {
        formatMail: function(sFirstName, sLastName) {
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            return sap.m.URLHelper.normalizeEmail(
                sFirstName + "." + sLastName + "@example.com",
                oBundle.getText("mailSubject", [sFirstName]),
                oBundle.getText("mailBody"));
        }
    });

点击链接，会发送Email

Property Formatting Using Data Types

对于数值类型的value可以直接用下面的方法进行格式化，path为数字与单位的路径，type选择类型，showMeasure: false不显示单位

value="{ parts: [{path: '/salesToDate'}, {path: '/currencyCode'}], 
         type: 'sap.ui.model.type.Currency', 
         formatOptions: {showMeasure: false } }"

Validation Using the Message Manager

对于金额等字段UI5中可以自动进行校验，如有错误通过 Message Manager 显示错误信息。创建view后将其注册到Message Manager

var oView = new sap.ui.core.mvc.XMLView({ viewName : "sap.ui.demo.db.view.App" });
sap.ui.getCore().getMessageManager().registerObject(oView, true);
oView.placeAt("content");

当输入字段有误时，会显示错误信息

Aggregation Binding Using Templates

List 控件为template control。创建Products.json文件

{ "Products": [ {
     "ProductID": 1,
     "ProductName": "Chai",
     "SupplierID": 1,
     "CategoryID": 1,
     "QuantityPerUnit": "10 boxes x 20 bags",
     "UnitPrice": "18.0000",
     "UnitsInStock": 39,
     "UnitsOnOrder": 0,
     "ReorderLevel": 10,
     "Discontinued": false
    }, {
     "ProductID": 2,
     "ProductName": "Chang",
     "SupplierID": 1,
     "CategoryID": 1,
     "QuantityPerUnit": "24 - 12 oz bottles",
     "UnitPrice": "19.0000",
     "UnitsInStock": 17,
     "UnitsOnOrder": 40,
     "ReorderLevel": 25,
     "Discontinued": true
    }]
  }

创建JSON Model加载Products.json，并将其绑定到products Model

var oProductModel = new sap.ui.model.json.JSONModel();
oProductModel.loadData("./model/Products.json");
sap.ui.getCore().setModel(oProductModel, "products");

在view中创建list控件，指定其item为<List headerText="{i18n>productListTitle}" items="{products>/Products}">在items标签中，访问相应字段

<items>
  <ObjectListItem title="{products>ProductName}"

Element Binding

在view中添加显示行信息的控件，在list控件中添加press事件press=".onItemSelected" type="Active"，在controller中实现该事件。oEvent.getSource获取点击的item行控件，getBindingContext("products")获取绑定的products上下文，path形式为/Products/0。获取显示详细行的productDetailsPanel控件，bindElement方法绑定model及path。

onItemSelected: function(oEvent) {
            var oSelectedItem = oEvent.getSource();
            var oContext = oSelectedItem.getBindingContext("products");
            var sPath = oContext.getPath();
            var oProductDetailPanel = this.getView().byId("productDetailsPanel");
            oProductDetailPanel.bindElement({ path: sPath, model: "products" });
        }

Expression Binding

添加Expression BindingnumberState="{= ${products>UnitPrice} > ${/priceThreshold} ? 'Error' : 'Success' }"
表达式绑定可以写成{=expression}(Two way)或{:=expression}(One way)，表达式中取model数据用${products>UnitPrice}的方式。对于如numberState="{= ${products>UnitPrice} <= ${/priceThreshold} ? 'Success' : 'Error' }"中的<=，不能直接用，需进行转义<=

Aggregation Binding Using a Factory Function

将List改为如下形式，通过factory function来建立item

            <List id="ProductList" headerText="{i18n>productListTitle}" items="{
                path: 'products>/Products',
                factory: '.productListFactory'
            }" />

controller中实现productListFactory，可以通过oContext.getProperty("ProductName")获取属性值，通过如下创建控件

oUIControl = new sap.m.ObjectListItem(sId, {
                    title : sDescription,
                    number : {
                        parts : [ "products>UnitPrice", "/currencyCode" ],
                        type : "sap.ui.model.type.Currency",
                        formatOptions : {
                            showMeasure : false
                        }
                    },
                    numberUnit : {
                        path : "/currencyCode"
                    }
                });

通过如下添加press事件，最后return oUIControl返回创建的控件。

oUIControl.setType(sap.m.ListType.Active);
oUIControl.attachPress(this.onItemSelected, this);
return oUIControl;