UI5下自动初始化Data model

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:

1. 项目结构：

   
   
   

   image.png

2. 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开始的做法

1. 项目结构：

   
   
   

   image.png
2. 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"
    }
  ]
}

3. 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描述文件中。

4. 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