IT干货网

UI5-文档-4.7-JSON Model

flyfish 2022年03月09日 SAP 151 0

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

我们将在app中添加一个输入字段,将它的值绑定到模型上,并将相同的值绑定到输入字段的描述上。描述将根据用户类型直接更新。

Preview

 

An input field and a description displaying the value of the input field

Coding

You can view and download all files at Walkthrough - Step 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函数并传递我们新创建的模型。模型现在被设置在视图上。

消息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.Input控件。这样,用户就可以输入收件人的问候语。我们使用XML视图的声明性绑定语法将其值绑定到SAPUI5模型:

  ▪/recipient/name在模型中声明路径。

webapp/index.html

<!DOCTYPE html> 
 
<html> 
 
   <head> 
 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
      <meta charset="utf-8"> 
 
      <title>Walkthrough</title> 
 
      <script 
 
         id="sap-ui-bootstrap" 
 
         src="/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-preload="async" 
 
         data-sap-ui-resourceroots='{ 
 
               "sap.ui.demo.walkthrough": "./" 
 
        }' > 
 
      </script> 
 
      <script> 
 
         sap.ui.getCore().attachInit(function () { 
 
                       sap.ui.xmlview({ 
 
                               viewName: "sap.ui.demo.walkthrough.view.App" 
 
                       }).placeAt("content"); 
 
         }); 
 
      </script> 
 
   </head> 
 
   <body class="sapUiBody" id="content"> 
 
   </body> 
 
</html>

  请注意:可以在脚本中使用data-sap-ui- compatversion ="edge",也可以使用data-sap-ui- bindingsyntax ="complex"。通过设置“edge”兼容模式,可以自动启用复杂的绑定语法。edge模式自动启用兼容性特性,否则必须手动启用这些特性。有关更多信息,请参见兼容性版本信息Compatibility Version Information.。value属性的绑定是一个简单的绑定示例,它只包含一个绑定模式。我们还可以将文本和绑定模式组合成更复杂的绑定结果,如description属性所示。为了能够使用所谓的复杂绑定语法,我们必须通过将引导参数data-sap-ui- compatversion设置为edge全局启用它。如果省略此设置,则只允许标准绑定语法,即“Hello {/ receiver /name}”将不再工作,而“{/ receiver /name}”将正常工作。

Conventions

  • 变量名使用匈牙利符号。


Parent topic: Walkthrough

Previous: Step 6: Modules

Next: Step 8: Translatable Texts

Related Information

Model View Controller (MVC)

Data Binding

JSON Model

API Reference:sap.ui.define


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.6-Modules