Custom JS when Navigating

There are 4 main alternatives when it comes to running custom JS:

  1. Listen to pager.childManager if you want to be notified whenever a navigation has happened. It is not recommended to try to stop the navigation at this point since it would involve changing the history.
  2. Bind to global click if you want to be notified when a navigation is about to happen and you want a chance to stop it. Just do not return true; in order to stop the navigation.
  3. Bind to local click if you want to control a certain navigation. This is probably what you want to do if you want to inject validation.
  4. Bind to local before/after show/hide if you just want to be notified about a navigation. Some custom bindings from other 3rd parties (e.g. Kendo UI) might be triggered after afterShow, since they put the processing of their bindings on the event queue (possible out of performance reasons). If you want your code to execute after their bindings are processed you either have to be able to jack into their bindings version of afterShow (if they got one) or put your code on the event queue too.
Show Fry
Fry Hide Fry

<div data-bind="page: {id: 'fry', beforeHide: beforeFryIsHidden, afterShow: afterFryIsDisplayed}">
    Fry
    <a class="btn" href="#!/navigation/custom_js_when_navigating">Hide Fry</a>
</div>
    
afterFryIsDisplayed:function () {
    $('body').css("background-color", "#FF9999");
}
beforeFryIsHidden:function () {
    $('body').stop().css("background-color", "#FFFFFF");
}