使用模型

学习目标

  • 向应用程序添加 JSON 模型，并通过属性绑定使用它

模型

在模型-视图-控制器（MVC）概念中，模型保存数据，并提供检索数据以及设置和更新数据的方法。

观看本视频，了解更多关于预定义模型的信息。

视频：本节含 SAP 官方视频（视频 ID 1_0i25wxka），需在 learning.sap.com 在线观看。

本课涵盖 JSON 模型、资源模型和 OData V4 模型。如果您需要有关 XML 模型或 OData V2 模型的信息，请参阅文档。

JSON 模型

实例化 JSON 模型

JSON 模型使用 sap.ui.model.json.JSONModel 类实现。

实例化 JSON 模型的代码截图，如下文所述。

图 Creating a Model Instance 展示了如何在视图控制器的 onInit 初始化方法中实例化一个 JSON 模型。

实例创建后，有若干种方式可以将数据放入模型。除了数据绑定（见下文）之外，还可以通过 API 在模型中设置和更改数据：

  • setData 方法将作为 JS 对象树传入的数据设置到模型中：

oModel.setData({
CustomerName: "SAP SE",
City: "Walldorf"
});

  • loadData 方法使用 GET HTTP 请求从传入的 URL 加载 JSON 编码的数据，并将得到的 JSON 数据存储在模型中：

oModel.loadData("model/data.json");

而 getData 方法则返回模型的当前数据。

将模型分配到 UI

在能够将控件绑定到模型之前，必须先将模型实例分配到 UI。

为此，您可以使用每个控件上都提供的 setModel 方法。传递给该方法的第一个参数是要设置的模型。第二个（可选）参数可用于为模型定义一个名称。如果省略名称，则会设置所谓的无名称默认模型。

实例化的 JSON 模型被分配到视图的截图。

在图 Setting the Model for the View 中，实例化的 JSON 模型通过 setModel 方法分配到视图。模型名称使用 customer。

模型的名称将在稍后的数据绑定中指定（见下文）。

为模型命名使得不仅可以为应用程序使用一个模型，还可以用不同的模型定义应用程序中的不同区域。您甚至可以将模型分配到各个单独的控件。您还可以定义嵌套模型，例如为应用程序定义一个 JSON 模型，并为应用程序中包含的表格控件定义一个 OData 模型。

当您为某个区域或控件指定模型时，该模型会传播到所有聚合的子控件。因此，如果您为容器控件设置了模型，该容器中包含（聚合）的所有控件都可以访问该模型。

在所示的示例中，放置在视图上的所有控件都可以访问该模型。

manifest.json 代码的截图，如下文所述。

如前所述，可以使用 JavaScript 实例化（JSON）模型并将其分配到 UI。

但是，也可以通过 manifest.json 应用程序描述符以声明方式定义模型。这样它们会随组件的生命周期自动创建和销毁。

要以声明方式为组件定义模型，需向 sap.ui5 命名空间的 models 属性添加一个条目。该条目的键表示模型名称，其中空字符串（""）代表默认模型。该条目的 type 属性用于设置模型类的名称，uri 属性可用于指定组件内模型数据的相对路径。

图 Declarative Approach 展示了一个示例，它实例化一个从 data.json 文件加载数据的 JSON 模型。该文件位于项目的 model 文件夹中。实例化的模型被设置为组件的默认模型（无名称），因此在该组件的所有视图中都可用。

数据绑定

绑定路径

观看视频，了解绑定路径和绑定内容的概念。

视频：本节含 SAP 官方视频（视频 ID 1_h4z4tgge），需在 learning.sap.com 在线观看。

将控件绑定到模型

要将控件绑定到模型，可以使用各种所谓的绑定类型。在图 Binding Syntax 所示的示例中，使用的是属性绑定。属性绑定使得可以根据模型数据自动初始化和更新控件的属性。

模型名称=customer，模型属性=CustomerName。

在该示例中，Input UI 元素的 value 属性和 Text UI 元素的 text 属性都绑定到 CustomerName 模型属性。要引用该模型属性，需使用绑定语法 {/path/to/data}。

一般来说，指定的路径可以是绝对路径，也可以是相对路径。绝对绑定路径以斜杠开头，相对绑定路径以名称标记开头，并相对于所绑定控件的绑定上下文进行解析。在该示例中，使用的是绝对路径，这意味着 CustomerName 模型属性并非相对于尚待定义的绑定上下文，而是位于模型数据的顶层。

如果模型已被分配了名称，则必须在绑定开头指定该模型名称，后跟一个“>”。因此，在该示例中，绝对路径 /CustomerName 前面加上 customer>，其中 customer 是模型名称。对于默认模型（无名称的模型），则直接指定数据路径，无需任何额外前缀。

该示例中 Text UI 元素的 text 属性不仅绑定到 CustomerName 模型属性。相应的绑定还包含额外的静态文本。这种复合绑定也称为计算字段。要使用此功能，SAPUI5 应用程序必须以复杂绑定语法运行。这可以通过引导脚本设置配置选项 data-sap-ui-compatVersion="edge" 来实现。

默认情况下，JSON 模型使用所谓的双向绑定模式。这意味着当模型数据发生变化时，控件会自动更新。反之，控件中的更改也会自动导致相应模型数据的更新。

例如，如果用户在所示的输入字段中输入一个值，该值会自动传输到 CustomerName 模型属性（“视图到模型”）。CustomerName 模型属性的当前内容会嵌入到通过 Text UI 元素显示的文本中（“模型到视图”）。如果通过程序代码更改该模型属性的值，更改后的值会自动显示在 UI 上（“模型到视图”）。

绑定模式

绑定模式定义模型如何绑定到 UI。前面已经讨论了双向绑定模式，它是 JSON 模型默认使用的模式。

SAPUI5 提供以下绑定模式：

  • 单向 这意味着从模型到视图的绑定。模型中的每个值更改都会更新视图中所有相应的绑定。

  • 双向 这意味着从模型到视图以及从视图到模型的绑定。模型中的任何更改都会自动更新视图中所有相应的绑定，视图中的任何更改也会自动更新相应的模型数据。

  • 一次性 视图的值只从模型中读取一次。

Default Binding Modes

创建模型实例时，该实例具有一个默认绑定模式。该模型实例的所有绑定都以此绑定模式作为其默认值。

比较模型（JSON、XML、Resource、OData V2、OData V4）在一次性、单向和双向类别下的表格，用绿色图标标记支持的能力，用红色图标标记不支持的情况。

图 Supported Binding Modes and Default Binding Modes 展示了 SAPUI5 中各数据模型支持哪些绑定模式，以及使用哪些默认值。

您可以在模型创建后覆盖默认绑定模式。要更改默认绑定模式，请在模型实例上调用 setDefaultBindingMode 方法。

向应用程序添加 JSON 模型

业务场景

在本练习中，您将创建一个 JSON 模型，并将其绑定到 Overview 视图上表单的输入字段。您还将调整 Create Customer 按钮上方弹出对话框中的信息文本，以显示表单中输入的客户名称。*Template:*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/10_fragmentsModel solution:*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/11_JSON_model

任务 1：在 Overview 视图控制器的初始化方法中实例化 JSON 模型

步骤

  1. 在编辑器中打开 *webapp/controller* 文件夹中的 *Overview.controller.js* 文件。

  2. 将 sap/ui/model/json/JSONModel 模块添加到视图控制器的依赖数组，并向视图控制器的工厂函数添加一个名为 JSONModel 的相应参数。

结果

视图控制器现在应如下所示： Overview.controller.js 文件，高亮显示 sap/ui/model/json/JSONModel 代码。 3. 向视图控制器添加 onInit 初始化方法。按如下方式实现该方法，以实例化一个 JSON 模型，并以名称 customer 将其设置给 Overview 视图。

onInit: function () {
var oModel = new JSONModel();
this.getView().setModel(oModel, "customer");
}

结果

视图控制器现在应如下所示：

Overview.controller.js 文件，高亮显示 onInit 函数。

任务 2：将 Overview 视图上表单的输入字段绑定到 JSON 模型

步骤

  1. 在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。

  2. 将表单的输入字段绑定到上面创建的 JSON 模型。为此，请按如下方式更改所有 <Input> 标签的 value 属性值： | Old | New | | --- | --- | | <Label text="Form" /> <Input value="" /> | <Label text="Form" /> <Input value="{customer>/Form}" /> | | <Label text="Customer Name" /> <Input value="" /> | <Label text="Customer Name" /> <Input value="{customer>/CustomerName}" /> | | <Label text="Discount" /> <Input value="" /> | <Label text="Discount" /> <Input value="{customer>/Discount}" /> | | <Label text="Street" /> <Input value="" /> | <Label text="Street" /> <Input value="{customer>/Street}" /> | | <Label text="Post Code" /> <Input value="" /> | <Label text="Post Code" /> <Input value="{customer>/PostCode}" /> | | <Label text="City" /> <Input value="" /> | <Label text="City" /> <Input value="{customer>/City}" /> | | <Label text="Country" /> <Input value="" /> | <Label text="Country" /> <Input value="{customer>/Country}" /> | | <Label text="Email" /> <Input value="" /> | <Label text="Email" /> <Input value="{customer>/Email}" /> | | <Label text="Telephone" /> <Input value="" /> | <Label text="Telephone" /> <Input value="{customer>/Telephone}" /> |

注意

由于该 JSON 模型命名为 customer，所有绑定都以 customer>前缀开头。后面的标识符定义所绑定模型属性的名称（例如 CustomerName）。

结果

Overview 视图现在应如下所示：

生成的 Overview.view 文件。

任务 3：通过弹出对话框上的信息文本显示用户输入的客户名称

步骤

  1. 在编辑器中打开 *webapp/view* 文件夹中的 *Dialog.fragment.xml* 文件。

  2. 更改通过 Text UI 元素显示的信息文本，使模型属性 customer>/CustomerName 的内容出现在弹出对话框上。为此，请将文本 "Customer data is later saved via an OData service." 替换为文本 "Customer {customer>/CustomerName} is later saved via an OData service."。

结果

XML 片段现在应如下所示： Dialog.fragment.xml 文件，高亮显示 Text 标签。 3. 从 SAP Business Application Studio 启动应用程序对其进行测试运行。 确保表单中输入的客户名称通过弹出对话框上的信息文本输出。

  1. 右键单击 sapui5-development-learning-journey 项目中的任意子文件夹，并在出现的上下文菜单中选择 Preview Application。

  2. 在出现的对话框中选择名为 start-noflp 的 npm 脚本。

  3. 在打开的应用程序中，检查组件是否按预期工作。