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控件变为不可输入。
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下寻找,没有点号表示寻找全局。
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为
在items标签中,访问相应字段
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
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;