Custom Widgets

pager.js is based on sound object oriented principles, making it easy to extend with new custom widgets.
In this tutorial the custom binding page-accordion-item is demonstrated.

The page-accordion-item works like

Zoidberg
Zoidberg Information
Hermes
Hermes Information
and is constructed with the markup
<div data-bind="page-accordion-item: {id: 'zoidberg'}">
    <a href="#!/widgets/custom_widgets/start/zoidberg">Zoidberg</a>

    <div>Zoidberg Information</div>
</div>
<div data-bind="page-accordion-item: {id: 'hermes'}">
    <a href="#!/widgets/custom_widgets/start/hermes">Hermes</a>

    <div>Hermes Information</div>
</div>
    

First we need to create a class that inherits from pager.Page.

pager.PageAccordionItem = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    pager.Page.apply(this, arguments);
};
pager.PageAccordionItem.prototype = new pager.Page();
    

The Page class has these methods to override:

init : void
getValue : void
getPage : void
sourceUrl : String
loadSource : String
show: void
showElement: void
hideElement : void
    

We want our custom binding to always show the first child element and only hide the second child element. Thus we need to override showElement and hideElement. showElement should show the second child and hideElement should hide the second child.

// get second child
pager.PageAccordionItem.prototype.getAccordionBody = function () {
    return $(this.element).children()[1];
};

// hide second child
pager.PageAccordionItem.prototype.hideElement = function () {
    // use hide if it is the first time the page is hidden
    if (!this.pageAccordionItemHidden) {
        this.pageAccordionItemHidden = true;
        $(this.getAccordionBody()).hide();
        if (callback) {
            callback();
        }
    } else { // else use a slideUp animation
        $(this.getAccordionBody()).slideUp();
        if (callback) {
            callback();
        }
    }
};

// show the second child using a slideDown animation
pager.PageAccordionItem.prototype.showElement = function () {
    $(this.getAccordionBody()).slideDown();
    if (callback) {
        callback();
    }
};
    

Finally you need to add the new class as a new custom binding.

ko.bindingHandlers['page-accordion-item'] = {
    init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var pageAccordionItem = new pager.PageAccordionItem(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        pageAccordionItem.init();
    },
    update:function () {
    }
};