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);
            }
        }

    });

});