Custom Hide- and Show-methods

You might want to use a custom animation or custom behaviour for a page. This is easily done by using the showElement and hideElement-properties. These properties should be supplied with a method that takes 2 arguments: the first is the page and the second is a callback that should be executed.

Show Fry

Fry

Hide Fry
<div data-bind="page: {id: 'fry', showElement: showFry, hideElement: hideFry}">
    <h2>Fry</h2>
    <a class="btn" data-bind="page-href: '../'">Hide Fry</a>
</div>
    

where

showFry:function (page, callback) {
    $(page.element).fadeIn(1000, callback);
};
hideFry:function (page, callback) {
    var $e = $(page.element);
    if (!page.pageHiddenOnce) {
        page.pageHiddenOnce = true;
        $e.hide();
    } else {
        $e.fadeOut(1000, function () {
            $e.hide();
        });
        if (callback) {
            callback();
        }
    }
};