SAP OPEN UI5 Step7 JSON Model

转载请联系vx：xiaoshitou5854

JSON Model

数据绑定，属于MVC中的M

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");
      }
   });
});

onInit是UI5生命周期里的一个方法，当controller创建完毕后，会调用它
sap/ui/model/json/JSONModel ：引入JSONModel库
var oData ：创建数据。数据的路径是recipient/name
var oModel ：创建JSONModel
this.getView().setModel(oModel) ：把创建的Model放到view里。

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>

<Input value="{/recipient/name}" ：在画面上添加输入框。它的值"{/recipient/name}"，就是找Model里的recipient/name，view和Model的值是绑定的，当输入框的值被修改后，Model的值也被自动修改。
description="Hello {/recipient/name}" : 输入框后面的描述
valueLiveUpdate="true" ：当在输入框输入时，实时反应到Model里。

绑定的语法：{}

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>

data-sap-ui-compatVersion="edge" ：这句很关键，指明可以使用复杂的绑定语法

如果没有指明，则"Hello {/recipient/name}"的写法是不好用的，只能用"{/recipient/name}这种语法。

本人微信：xiaoshitou5854