Context
从version 1.30开始，SAPUI5 支持model的自动初始化（Automatic model instantiation）。
做法是将model定义在manifest.json中，由component直接自动初始化。
而老的方式，是在component.js中，用js语句显式地初始化。
在SAPUI5 version 1.30之前的版本中，app的额外配置信息，诸如 service configuration，root view，routing configuration等，必须加载Component.js的metadata section。
从SAPUI5 version 1.30开始, 推荐的做法是将这些配置都写在 manifest.json 描述文件里。
SAPUI5 version 1.30之前的做法
Example:
-
项目结构：
image.png webapp/Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata : {
rootView: "sap.ui.demo.wt.view.App"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
// set i18n model
var i18nModel = new ResourceModel({
bundleName : "sap.ui.demo.wt.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});
Component.js file包含了两部分:
- metadata section：app的配置信息。例子中定义了root view。
- init function：在这里初始化data model和i18n model。
注意：
这里的model是直接设置在component之上的。不过由于nested controls会从parent control自动继承model，所以这些model在view里同样是可见的。
SAPUI5 version 1.30开始的做法
-
项目结构：
image.png - webapp/Invoices.json
{
"Invoices": [
{
"ProductName": "Pineapple",
"Quantity": 21,
"ExtendedPrice": 87.2000,
"ShipperName": "Fun Inc.",
"ShippedDate": "2015-04-01T00:00:00",
"Status": "A"
},
{
"ProductName": "Milk",
"Quantity": 4,
"ExtendedPrice": 9.99999,
"ShipperName": "ACME",
"ShippedDate": "2015-02-18T00:00:00",
"Status": "B"
},
{
"ProductName": "Canned Beans",
"Quantity": 3,
"ExtendedPrice": 6.85000,
"ShipperName": "ACME",
"ShippedDate": "2015-03-02T00:00:00",
"Status": "B"
},
{
"ProductName": "Salad",
"Quantity": 2,
"ExtendedPrice": 8.8000,
"ShipperName": "ACME",
"ShippedDate": "2015-04-12T00:00:00",
"Status": "C"
},
{
"ProductName": "Bread",
"Quantity": 1,
"ExtendedPrice": 2.71212,
"ShipperName": "Fun Inc.",
"ShippedDate": "2015-01-27T00:00:00",
"Status": "A"
}
]
}
- webapp/manifest.json
{
…
"sap.ui5": {
"_version": "1.1.0",
"rootView": "sap.ui.demo.wt.view.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.wt.i18n.i18n"
}
},
"invoice": {
"type": "sap.ui.model.json.JSONModel",
"uri": "Invoices.json"
}
}
}
}
i18n和invoice data model都被定义在manifest.json描述文件中。
- webapp/Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
});
注意metadata section中配置的manifest。利用这个配置，component会自动初始化一个包含invoice信息的JSONModel，以及一个i18n model。
这两个model在整个app中都是可见的。
Reference
UI5 Walkthrough:
Step 9: Component Configuration
Step 10: Descriptor for Applications
Step 20: Aggregation Binding
