转载请联系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