Navigation not working in SAP.m split app MVC

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