Fiori2.0学习笔记-事件的处理

本篇我们将讲事件的处理，比如说我们如何定义一个事件，并且触发一个事件，还有他的传参等

下面我们来看一个demo
这个demo的布局就是一个CheckBox，一个复选框和一个List，一些其他的配置如路由，我们就不再赘述

<Page title="{i18n>title}" >
    <headerContent>
        <Button text="next page" tooltip="nextpage" press="goNextPage"/>
    </headerContent>
    <content>
        <CheckBox text="testCheckBoxEvent" select="selectedCheckBox"></CheckBox>
        <Select items="{path: '/UserList'}" change="selectionChange">
            <core:Item key="{ID}" text="{Name}" />
        </Select>
        <List headerText="My Test List" selectionChange="onSelectionChange"  
        itemPress="onSelectionChange"
        mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}"
    items="{path: '/UserList'}">//selectionChange是用于DeskTop itemPress是用于手机 mode里面是一个判断，如果判断是手机设备我们就不让他选中
    <items>
        <CustomListItem type="{= ${device>/system/phone} ? 'Active' : 'Inactive'}" >
                <HBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
                    <Label text="{Name}"/>
                </HBox>
        </CustomListItem>
    </items>
    <swipeContent>
        <Button text="Delete Item" type="Reject" press="handleReject"/>
    </swipeContent>
</List>
    </content>
</Page>

下面我们再来看每一个事件的处理

首先我们给FirstView绑定了一个model 取名UserList 里面放置了两个数组

    this.currentModel = new JSONModel({
                UserList: [{
                    ID: 0,
                    Name: 'RIchard'
                }, {
                    ID: 1,
                    Name: 'Tom'
                }]
            });
            this.getView().setModel(this.currentModel);
            this.subcribeEvent();

然后我们希望我们选中的时候会获取到选中的数据，这时候我们需要触发的function是onSelectionChange

    onSelectionChange: function(oEvent) {
            MessageToast.show(oEvent.getParameter("listItem").getBindingContext().sPath);//首先我们拿到oEvent通过getParameter传到ListItem里面，这时我们会拿到数据信息，然后在通过getBindingContext().sPath拿到信息路径
            console.log(this.getView().getModel().getProperty(oEvent.getParameter("listItem").getBindingContext().sPath));//这时我们可以拿到当前路径的object的值           //  this.router.navTo("secondView"); 
        },

然后是checkBox的selectedCheckBox
CheckBox是需要判断当前用户是否选中的状态

        selectedCheckBox: function(oEvent) {
            MessageToast.show(oEvent.getParameter('selected'));//这里我们依旧是利用oEvent.getParameter拿到这个属性,不过这个是系统来查找
            //oEvent.getParameters();//这行代码会让我们拿到当前组件所有的parameter，并且里面会有对应的值，然后就可以拿到了
        },

复选框中的selectionChange

    selectionChange: function(oEvent) {
            //oEvent.getParameter('selectedItem').getKey();//获取key值
            //oEvent.getSource();//获取所有数据
            MessageToast.show(oEvent.getParameter('selectedItem').getBindingContext().sPath);//拿到路径
        }

以上三种都是系统内的事件，那实际开发中必然会出现自定义事件

    subcribeEvent: function() {
            var bus = sap.ui.getCore().getEventBus();//EventBus：处理所有Event核心的类（core），拿到这个Bus对象，这个BUS对象有三个事件subscribe（预定义一个事件，这个事件是一个全局的事件）、subscribeOnce（定义一个一次性事件，触发后会被销毁）、unsubscribe
            var self = this;
            bus.subscribe("EventDemoCase", "updateData", function(channel, event, data) {//EventDemoCase我们可以理解为一个管道，这个我们最好定义一下，不定义就是一个默认的管道。然后后面是你的一些事件处理，我们第一个事件是一个更新操作updata
                console.log(data);
                var tempData = self.currentModel.getData();
                tempData.UserList.push(data);//上传新数据
                self.currentModel.refresh();//更新model刷新这个列表
            }, 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");
        },