第7步:JSON模型

最新推荐文章于 2025-06-01 09:15:27 发布

真的是我太天真

最新推荐文章于 2025-06-01 09:15:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/sdk#/topic/70ef981d350a495b940640801701c409

SAPUI5 专栏收录该内容

40 篇文章

订阅专栏

本文介绍在SAPUI5 MVC应用中如何使用JSON模型，通过实例展示了如何创建模型、设置数据绑定，并解释了数据绑定的工作原理。在控制器中初始化JSON模型，并在XML视图中进行数据绑定，使用户输入与模型及视图描述同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

现在我们已经设置了视图( V )和控制器( C )，是时候考虑MVC中的M了。

我们将向应用程序添加一个输入字段，将其值绑定到模型中，并将相同的值绑定到输入字段的描述中。描述将根据用户输入直接更新。

预览

在这里插入图片描述

一个输入字段和一个显示输入字段值的描述

代码

你可以在演练-第7步查看和下载所有文件。

webapp/controller/App.controller.js
在这里插入图片描述

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

我们向控制器添加了一个init函数。onInit是SAPUI5的生命周期方法之一，在创建控制器时由框架调用，类似于控件的构造函数。

在函数内部，我们实例化一个JSON模型。模型的数据只包含“收件人”的单个属性，其中还包含名称的一个附加属性。

为了能够在XML视图中使用这个模型，我们在视图上调用setModel函数并传递新创建的模型。现在在视图上设置了模型。

Message Toast只是显示静态的“Hello World”消息。我们将在接下来的步骤中演示如何加载翻译后的文本。

webapp/view/App.view.xml
在这里插入图片描述

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

我们向视图添加了一个sap. m.n iinput控件。有了这个，用户可以输入一个收件人的问候语。我们通过使用XML视图的声明式绑定语法将它的值绑定到SAPUI5模型:

大括号{…}表示数据取自接收者的对象名称属性的值。这就是所谓的“数据绑定”。
/recipient/name声明了模型中的路径。

webapp/index.html
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

value属性的绑定是一个简单的绑定示例，它只包含一个绑定模式。我们还可以将文本和绑定模式组合成更复杂的绑定结果，如description属性中所示。为了能够使用所谓的复杂绑定语法，我们必须通过将引导参数data-sap-ui-compatVersion设置为edge来全局启用它。如果省略此设置，则只允许标准的绑定语法，这意味着“Hello {/recipient/name}”将不再工作，而“{/recipient/name}”将正常工作。

注意
你可以在脚本中使用data-sap-ui-compatVersion="edge"或者data-sap-ui-bindingSyntax=“complex”。通过设置“edge”兼容性模式，将自动启用复杂的绑定语法。edge模式自动启用兼容性特性，否则必须手动启用。有关更多信息，请参见兼容性版本信息。

约定

对变量名使用匈牙利命名法。

匈牙利命名法是电脑程式设计中的一种变量命名规则，此命名法又可细分为：系统匈牙利命名法和匈牙利应用命名法。原始的匈牙利命名法，现在被称为匈牙利应用命名法，由1972年至1981年在施乐帕洛阿尔托研究中心工作的-程序员查尔斯·西蒙尼（之后任微软总设计师）发明。此命名方法被微软公司广泛推广，以下重点讲述系统匈牙利命名法。

基本原则是：变量名=属性+类型+对象描述，其中每一对象的名称都要求有明确含义，可以取对象名字全称或名字的一部分。命名要基于容易记忆容易理解的原则。参考博客。

章节