本篇我们将讲事件的处理,比如说我们如何定义一个事件,并且触发一个事件,还有他的传参等
下面我们来看一个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");
},