Fiori学习笔记 - 事件之常用控件

在Fiori开发过程中，CheckBox、Select，List控件会经常用到，本文记录了这三种控件的事件定义、触发的用法。

view

controller

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/m/MessageToast"
], function(Controller, JSONModel, MessageToast) {
	"use strict";

	return Controller.extend("demo.eventDemoCase.controller.FirstView", {
		onInit: function() {
			this.router = sap.ui.core.UIComponent.getRouterFor(this);
			this.currentModel = new JSONModel({
				UserList: [{
					ID: 0,
					Name: 'Name 1'
				}, {
					ID: 1,
					Name: 'Name 2'
				}]
			});
			this.getView().setModel(this.currentModel);
		},
		onSelectionChange: function(oEvent) {
			MessageToast.show(oEvent.getParameter("listItem").getBindingContext().sPath);//显示当前点击该条对象的路径
			console.log(this.getView().getModel().getProperty(oEvent.getParameter("listItem").getBindingContext().sPath));//输出该点击对象路径所对应的值
		},
		selectedCheckBox: function(oEvent) {
			//oEvent包含所有参数信息
			MessageToast.show(oEvent.getParameter('selected'));
			//oEvent.getParameters();可以拿到该组件下所有parameter的集合
		},
		selectionChange: function(oEvent) {
			//oEvent.getParameter('selectedItem').getKey();拿到该选中条目的key值
			MessageToast.show(oEvent.getParameter('selectedItem').getBindingContext().sPath);
		}
	});
});

其中几个参数特在此进行说明。

selectionChange 和 itemPress ：都是用于点击事件的处理，selectionChange一般用于PC端， itemPress一般在手机端触发
{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}：一个三目运算，作用是判断当前设备是桌面还是手机，从而设定在不同设备上的选中状态。${}是取到相应路径下的值，=用来判断是true还是false
device： 在 Component.js 中 init 方法里定义，

this.setModel(models.createDeviceModel(), "device");

这里的models则是定义在model文件夹下的一个文件，便于模块化管理代码。
下面将分别贴出Component.js和models.js的代码。

**Component.js **

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"demo/eventDemoCase/model/models"
], function(UIComponent, Device, models) {
	"use strict";

	return UIComponent.extend("demo.eventDemoCase.Component", {
		metadata: {
			manifest: "json"
		},
		init: function() {
			jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);
			var router = this.getRouter();
			this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
			router.initialize();
			// set the device model
			this.setModel(models.createDeviceModel(), "device");
		}
	});
});

models.js

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/Device"
], function(JSONModel, Device) {
	"use strict";
	return {
		createDeviceModel: function() {
			var oModel = new JSONModel(Device);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		}
	};
});