SAP UI5 - 视图


视图是使用 SAP 库定义的,如下所示 -

  • XML 与 HTML、混合或独立:Library- sap.ui.core.mvc.XMLView
  • JavaScript:库- sap.ui.core.mvc.JSView
  • JSON:库 - sap.ui.core.mvc.JSONView
  • HTML:库 - sap.ui.core.mvc.HTMLView

JavaScript 查看示例

Sap.ui.jsview(“sap.hcm.address”, {
   getControllerName: function() {
      return “sap.hcm.address”;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: “Hello” });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

HTML 查看示例

<template data-controller-name = ”sap.hcm.address’>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
      Id = ”Button1” data-text =  ”Hello” Data-press = ”sayHello”>
   </div>
</template>

同样,您可以创建从 sap.ui.core.mvc.JsonView 派生的 JSON 视图。

{
   “type”:”sap.ui.core.mvc.JsonView”,
   “controllerName”:”sap.hcm.address”,
   ……………………….
   …………………...
   …………………….
}

视图类型比较

下表列出了与 MVC 概念相关的主要功能以及不同视图类型与这些功能的比较。

特征 JS视图 XML视图 JSON 视图 HTML 视图
标准和自定义库 是的 是的 是的 是的
string、int Boolean、float 类型的属性 是的 是的 是的 是的
聚合 1:1、1:n 关联 1:1、1:n 是的 是的 是的 是的
简单的数据绑定 是的 是的 是的 是的
自定义数据绑定 是的
嵌入 HTML 是的
代码完成 是的 是的
模板化 是的
验证 是的
单一事件监听器 是的 是的 是的 是的