Navigation not working in SAP.m split app MVC

Question

Hello Experts,
This is my index.html file:
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.m,sap.ui.commons"
  data-sap-ui-theme="sap_bluecrystal">
  </script>
<!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->
<script>
  sap.ui.localResources("bachelorproefbartgeudens");
  var startpage = sap.ui.view({id:"promostart", viewName:"bachelorproefbartgeudens.Promo_App_Start", type:sap.ui.core.mvc.ViewType.JS});
  var infopage = sap.ui.view({id:"promoinfo", viewName:"bachelorproefbartgeudens.Promo_App_Info", type:sap.ui.core.mvc.ViewType.JS});
  var infopage2 = sap.ui.view({id:"promoinfo2", viewName:"bachelorproefbartgeudens.Promo_App_Info2", type:sap.ui.core.mvc.ViewType.JS});
  /*** THIS IS THE "APPLICATION" CODE ***/
  //SPLIT APP
  var oSplitApp = new sap.m.SplitApp("mySplitApp", {});
  //add the master pages to the splitapp control
  oSplitApp.addMasterPage(startpage);
  //add the detail pages to the splitapp control
  oSplitApp.addDetailPage(infopage).addDetailPage(infopage2);
  //oSplitApp.addDetailPage(oDetailPage1).addDetailPage(oDetailPage2);
  //place
  oSplitApp.placeAt("content");
  </script>
So i use the views as pages. But the thing is when i try to navigate after pushing a button in a view:
press : function (evt){
  // navigate to detail2 page
  var bus = sap.ui.getCore().getEventBus();
  console.log(bus);
  bus.publish("nav", "to", {
   id : "detail2"
It is not doing anything...
Any suggestions?
Kind Regards,
Bart

Answer 1

Hi Andreas,
U were right, I had nothing in my controller that listened to the EventBus.
I looked it up a little and i found i should add these functions.
onInit: function() {
  var view = this.getView();
  // to avoid scrollbars on desktop the root view must be set to block display
  view.setDisplayBlock(true);
  // remember the App Control
  this.app = view.byId("mySplitApp");
  // subscribe to event bus
  var bus = sap.ui.getCore().getEventBus();
  bus.subscribe("nav", "to", this.navToHandler, this);
  bus.subscribe("nav", "back", this.navBackHandler, this);
  navToHandler : function(channelId, eventId, data) {
  if (data && data.id) {
  // lazy load view
  if (this.app.getPage(data.id) === null) {
  jQuery.sap.log.info("now loading page '" + data.id + "'");
  this.app.addPage(sap.ui.jsview(data.id, "sap.m.mvc." + data.id));
  // Navigate to given page (include bindingContext)
  this.app.to(data.id, data.data.context);
  } else {
  jQuery.sap.log.error("nav-to event cannot be processed. Invalid data: " + data);
  navBackHandler : function() {
  this.app.back();
Sorry i'm new to this.
Regards,
Bart