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;
网友评论