步骤7:JSON模型

1.练习效果

步骤7:JSON模型 - 第1张  | 优通SAP

2.源码

您可以在演练-步骤7中查看和下载所有文件。

前面说了MVC中的VIEW,controller,这里开始说MVC中的M.

下面将向应用程序添加一个输入框字段,将其值绑定到模型M中,并将相同的值绑定到输入字段的描述。用户类型将直接更新描述。

webapp / controller / App.controller.js

我们向控制器添加一个初始化函数。 onInit是SAPUI5启动事件,在创建控制器创建时由框架调用,类似于控件的构造函数。

在函数内部,我们实例化了一个JSON模型。模型的数据仅包含“收件人(recipient)”的单个属性,并且在其中还包含一个属性:名称(name)。

为了能够在XML视图中使用此DATA模型,我们将 setModel在视图上运行并传递我们新创建的模型。现在在视图上设置了模型。

消息事件只是显示静态文本“ Hello World”消息。在下一步中,我们将展示如何加载翻译后各种语言的文本。

webapp/view/App.view.xml

我们添加一个 sap.m.input控件到视图中。这样,用户可以输入问候语的收件人。通过使用XML视图的声明性绑定语法,将其值绑定到 SAPUI5模型:

  • 大括号 {…} 表示数据取自 收件人RECIPIENT的对象名称name属性。此操作称为“数据绑定”。
  • /收件人/姓名 在模型中声明路径。

webapp / index.html

value属性的绑定是一个仅包含绑定模式的简单绑定示例。我们还可以将文本和绑定模式组合为更复杂的绑定结果,如description属性所示。为了能够使用所谓的复杂绑定语法,我们必须通过设置bootstrap参数来全局启用它data-sap-ui-compatVersion 给edge。如果省略此设置,则仅允许使用标准绑定语法,即“ “Hello {/recipient/name}将不可使用,只能使用 “{/recipient/name}“这样的语法。

3.注意

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

4.约定

  • 对变量名{}符号。

留下一个回复

你的email不会被公开。

8 − 4 =