Walkthrough-step7 JSON Model

MVC的结构让代码更清晰，分工更明确，维护也更轻松。step7介绍了Model中的一种类型JSON Model，示例增加了一个输入控件，并且与对应的Model进行绑定，从而实现对控件数据的控件

通常View和Controller是1:1的关系，但也有可能是Controller并没有对应的UI，那些称为应用控制器，或者是没有Controller的View。

** Model **
Modelchart
Model可以分为两大类，服务端的Odata和客户端的JSON Model,XML Model,Resource Model；

JSON Model：最常见的Model，支持双向绑定（默认）和一次性绑定，适应数据量不太大时使用。
XML Model: 也挺好用的一种Model，支持双向绑定，单身绑定和一次性绑定，数据量更不能太大。
Resource Model: 一次性绑定，主要用来翻译文本
OData Model：这个就厉害了，以后单独写一篇吧

这一节的修改主要是在controller中引入了JSON Model这个module
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("Step7_JSONModel.controller.App", {
		onInit: function(){
			var oData={
				recipient:{
					name:"world"
				}
			};
			var oModel = new JSONModel(oData);
			this.getView().setModel(oModel);
		},
		onClickMe: function(oEvent) {
			//This code was generated by the layout editor.
			MessageToast.show("you Clicked me!");
		}
	});
});

和MessageToast一样，JSON Model做为一个Module被声明在了Controller，同时增加了一个onInit初始化事件，onInit是一个SAP UI5的生命周期方法，在Controller创建的时候会被Framework调用，相当于是这个Controller的一个构造函数。
var oData={...} 声明了一个JSON 对象oData
var oModel = new JSONModel(oData);声明一个JSON Model对象oModel
this.getView().setModel(oModel);将view与Mode对象进行绑定（双向绑定）
双向绑定意味着修改Model的同时view也会相应变化，界面上修改数据程序的Model也会相应变化。

webapp/view/App.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="Step7_JSONModel.controller.App">
	<App>
		<pages>
			<Page title="Title">
				<content>
				    <Button text="ClickMe" width="100px" id="__button0" press="onClickMe"/>
				    <Input width="200px" id="__input0" value="{/recipient/name}" description="Hello {/recipient/name}" valueLiveUpdate="true"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

页面上加了一个input控件，指定了几个属性

id: DOM元素标识
width：宽度，可以用%相对宽度，也可以用px指定像素
value：很重要的一个概念，数据绑定，使用{}来实现对控件的属性和Model的绑定，这里{/recipient/name}其实是省略了model名，因为controller中setModel并没有给这个Model别名，也就是指定了默认的Model，一个view只能有一个默认Model，这个习惯最好不要养成，定义Model就要使用Model名来绑定，完整的写法应该是Controller中this.getView().setModel(oModel,"aaa");指定view绑定的model的别名为aaa,然后在View中使用value="{aaa>/recipient/name}" 进行绑定。
description: 输入框的描述，注意这里的值是"Hello {/recipient/name}"，这是一种复合绑定，既有常量，也有变量，要使用这种绑定方式，必须在应用全局声明，在index.html中找到这句data-sap-ui-compatVersion="edge"，如果没有这句，默认是简单绑定simple binding，就不能用这种复合绑定（也可以用data-sap-ui-bindingSyntax="complex"）。
valueLiveUpdate

Step7run

Walkthrough-step7 JSON Model

猜你喜欢