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
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 () { } };