ui5_Walkthrough_Step 7:JSON Model

同ui5_Walkthrough_Step 6:Modules 一样新建文件夹07，此处为了方便我直接将上一步骤中06文件下的内容直接复制过来修改,此练习只需修改App.view.xml 和App.controller.js 及index.html文件

index.html

html 复制代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough step_7:  JSON model</title>
	<script
		id="sap-ui-bootstrap"
		src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_fiori_3"
		data-sap-ui-libs="sap.m" 
		data-sap-ui-compatVersion="edge" 
		data-sap-ui-async="true"
		data-sap-ui-resourceroots='{
			"sap.ui5.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui5/walkthrough/index">
	</script>
</head>
<!--data-sap-ui-compatVersion="edge"  指定sap ui5框架使用当前版本最新实现
避免版本兼容问题-->
<body>
	<div class="sapUiBody" id="content"> <!--//sapUiBody ui5框架标准特定类名-->
		  
</body>
</html>

与Step 6:Modules练习相比：新增

data-sap-ui-theme="sap_fiori_3"

data-sap-ui-libs="sap.m"

data-sap-ui-compatVersion="edge"

<!--data-sap-ui-compatVersion="edge" 指定sap ui5框架使用当前版本最新实现

App.view.xml

XML 复制代码

<mvc:View
   controllerName="sap.ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Button
    text="Click me"
    press="onPress"/>
   <Input 
    id="input1"
    value="{/recipient/name}"
    description="Hello {/recipient/name}"
    valueLiveUpdate="true"
    width="50%"/>
</mvc:View>

<!--mvc 是一个命名空间，代表sap.ui.core.mvc  
   xmlns="sap.m" 定义视图的默认命名空间，声明文本控件Text 
   的时候就不需要写成sap.m.Text 
   controllerName 指定sap.ui5.walkthrough
   命名空间后的controller文件夹下的App.controller.js文件
   value="{/recipient/name}" 把input控件的value 属性绑定到
   json模型recipient的name字段上,valueLiveUpdate="true" 为双向绑定
    recipient model 在在控制器文件中定义
 -->

与Step 6:Modules练习相比：新增input控件，取值与App.controller.js中定义的json模型绑定

<Input

id="input1"

value="{/recipient/name}"

description="Hello {/recipient/name}"

valueLiveUpdate="true"

width="50%"/>

valueLiveUpdate 若设置为true，这当我在输入文本框输入值后后面的标签文本会一起变化，若为flase这不会随之变动

App.controller.js

javascript 复制代码

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.ui5.walkthrough.controller.App", {
      onInit: function () {
        var oData = {
          recipient: {
            name: "Step 7: JSON Model",
          },
        };
        var oModel = new JSONModel(oData);
        this.getView().setModel(oModel);
      },

      onPress: function () {
        var oInput = this.byId("input1");
        MessageToast.show("Hello World7");
        console.log(oInput);
      },
    });
  }
);
// "sap/ui/model/json/JSONModel" sap ui5 标准json模型
//sap/ui/core/mvc/Controller 声明控制器实现依赖于sap ui5 标准控制器
//当sap/ui/core/mvc/Controller module加载完成后function (Controller) 会
//被调用，这里的onPress方法和App.view.xml视图里的Button press时间绑定，
// alert弹窗一个弹窗
// 新建一个变量oData， var oModel = new JSONModel(oData)将变量传入新建模型
// 使用setModel将json模型与xml文件中的视图绑定

与Step 6:Modules练习相比：onInit方法定义一下json模型oModel并将新定义的变量oData传值给它,sap.ui.define新增依赖"sap/ui/model/json/JSONModel"，回调函数function新增传参

function JSONModel

onInit: function () {

var oData = {

recipient: {

name: "Step 7: JSON Model",

},

};

var oModel = new JSONModel(oData);

this.getView().setModel(oModel);

},

运行结果如下：