Fiori学习笔记

Fiori 的事件处理除去常用控件的一些使用，不得不提的还有自定义事件。目前所接触到的自定义事件多数用于，在detail页面触发某个方法后更新list页面的数据。个人觉得自定义事件的定义、触发等使用还是十分便利的。

首先要定义下自定义事件的对象，这个自定义对象下面包含三个方法：全局事件（subscribe），一次性事件（subscribeOnce），移除事件（unsubscribe）。下面就贴出自定义事件demo的运行效果图：

list页面：

detail页面：

在detail页面点击按钮触发自定义事件后，返回list页面：

下面贴出相关的代码：
List View：

<mvc:View controllerName="demo.eventDemoCase.controller.FirstView" xmlns:html="http://www.w3.org/1999/xhtml"    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">    <App>        <pages>            <Page title="{i18n>title}">                <headerContent>                    <Button text="next page" tooltip="nextpage" press="goNextPage"/>                </headerContent>                <content>                    <List headerText="My Test List" selectionChange="onSelectionChange" itemPress="onSelectionChange"                        items="{path: '/UserList'}">                        <items>                            <CustomListItem>                                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">                                    <Label text="{Name}"/>                                </HBox>                            </CustomListItem>                        </items>                        <swipeContent>                            <Button text="Delete Item" type="Reject" press="handleReject"/>                        </swipeContent>                    </List>                </content>            </Page>        </pages>    </App></mvc:View>

List 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);            this.subcribeEvent();        },            subcribeEvent: function() {            var bus = sap.ui.getCore().getEventBus();//拿到bus对象            var self = this;            bus.subscribe("EventDemoCase", "updateData", function(channel, event, data) {                console.log(data);                var tempData = self.currentModel.getData();                tempData.UserList.push(data);                self.currentModel.refresh();            }, this);            bus.subscribeOnce("EventDemoCase", "updateDataOnce", function(channel, event, data) {                alert('asdfa');            }, this);            //unsubscribe        },        unSubscribeEvent:function(){            var bus = sap.ui.getCore().getEventBus();            bus.unsubscribe("EventDemoCase", "updateData");        },        goNextPage: function() {            this.router.navTo("secondView");        },        onSelectionChange: function(oEvent) {            MessageToast.show(oEvent.getParameter("listItem").getBindingContext().sPath);            console.log(this.getView().getModel().getProperty(oEvent.getParameter("listItem").getBindingContext().sPath));            //  this.router.navTo("secondView");         }    });});

关于自定义事件的相关内容，在此进行简单说明。

getEventBus(): 处理所有event的一个核心类，隶属于sap.ui.core的一个模块。

bus 对象下有三个方法：

subscribe：预定义一个全局事件，EventDemoCase：是一个channel，可以理解为一个管道，管道下面可以有很多事件；updateData：定义的事件处理

subscribeOnce：定义一个一次性事件，触发一次之后会被销毁

unsubscribe：remove一个事件，传入subscribe方法的前两个参数即可。在这里就是 “EventDemoCase” 和 “updateData”两个参数。

Detail View：

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"    controllerName="demo.eventDemoCase.controller.SecondView" xmlns:html="http://www.w3.org/1999/xhtml">    <App>        <pages>            <Page title="Page 2" showNavButton="true" navButtonPress="goBack">                <content>                    <Button text="add new Data in list" press="addNewData"></Button>                </content>            </Page>        </pages>    </App></mvc:View>

Detail Controller：

sap.ui.define([    "sap/ui/core/mvc/Controller",    "sap/ui/core/routing/History"], function(Controller, History) {    "use strict";    return Controller.extend("demo.eventDemoCase.controller.SecondView", {        onInit:function(){        },        addNewData:function(){            sap.ui.getCore().getEventBus().publish("EventDemoCase", "updateData", {ID:3, Name:'Name 3'});        },        goBack:function(){            var oHistory, sPreviousHash;            oHistory = History.getInstance();            sPreviousHash = oHistory.getPreviousHash();            if (sPreviousHash !== undefined) {                window.history.go(-1);            }        }    });});