diff --git a/README.md b/README.md index 482291c..8b3f18d 100644 --- a/README.md +++ b/README.md @@ -413,36 +413,60 @@ The source code is documented using JsDoc. -## In the pipeline - - ### Should be possible to react to a failed navigation Both Page-objects and pager should send events whenever a navigation failed (i.e. no matching page for the route). + + Go to random sub-page + +
+ -## Backlog +
+
+ +
+
+
+ +where + + randomFailed:function (page, route) { + viewModel.newChildren.push({ + childId:route[0] + }); + page.showPage(route); + }, + newChildren:ko.observableArray([]) + + +## In the pipeline -There are a lot of features waiting to be implemented. Here are some of them. ### Should be possible to load view content using a custom method In order to facilitate programming in the large it is useful to be able to extract views as separate components. These views should not be forced to be stored as html-fragments or be loaded with jQuery. -Thus a way to inject custom views should be possible. This is done using the `sourcer`-property. +Thus a way to inject custom views should be possible. This is done using the `source`- or +`sourceOnShow`-properties. Just supply a method instead of a string! -The `sourcer`-property takes a method that should take a `pager.Page` as first argument and return nothing. +These properties takes a method that should take a `pager.Page` as first argument, a callback, and return nothing. -
+
where - window.view = function(viewModule) { - return function(page) { - require(viewModule, function(viewString) { + window.requireView = function(viewModule) { + return function(page, callback) { + require([viewModule], function(viewString) { $(page.element).html(viewString); + callback(); }); }; }; @@ -451,9 +475,14 @@ if // file: character/zoidberg.js define(function() { - return '

Zoidberg

; + return '

Zoidberg

'; }); +## Backlog + +There are a lot of features waiting to be implemented. Here are some of them. + + ### Should be possible to send URI (fragment identifier) parameters to a page A page should be able to access the information in the current route - changing a view-model. diff --git a/demo/character/zoidberg.js b/demo/character/zoidberg.js new file mode 100644 index 0000000..6050ef1 --- /dev/null +++ b/demo/character/zoidberg.js @@ -0,0 +1,3 @@ +define(function() { + return '

Zoidberg

'; +}); \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js index 1b10353..693c096 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -47,6 +47,16 @@ require(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap'], function ($, }; }; + window.requireView = function(viewModule) { + return function(page, callback) { + require([viewModule], function(viewString) { + $(page.element).html(viewString); + callback(); + }); + }; + }; + + $(function () { pager.extendWithPage(viewModel); diff --git a/demo/index.html b/demo/index.html index 7ad43e3..11da635 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,7 +19,8 @@ underscore:'lodash.min', knockout:'knockout-2.1.0', pager:'pager.amd.min', - bootstrap:'bootstrap/js/bootstrap.min' + bootstrap:'bootstrap/js/bootstrap.min', + "zoidberg":'character/zoidberg' } }); @@ -979,6 +980,49 @@

Reacting to Failed Navigations

newChildren:ko.observableArray([]) + Read about loading a view using a custom method + +
+ +
+
+

Load View using Custom Method

+ +

+ In order to facilitate programming in the large it is useful to be able to extract views as separate + components. + These views should not be forced to be stored as html-fragments or be loaded with jQuery. +
+ Thus a way to inject custom views should be possible. This is done using the source- or + sourceOnShow-properties. Just supply a method instead of a string! +
+ These properties takes a method that should take a pager.Page as first argument, a callback, + and return nothing. +

+
+ + Load custom view using requireView-method + +
+ +
+ + 
+<div data-bind="page: {id: 'zoidberg', sourceOnShow: requireView('zoidberg')}"/>        
+
+ + where + + 
+window.requireView = function(viewModule) {
+    return function(page, callback) {
+        require([viewModule], function(viewString) {
+            $(page.element).html(viewString);
+            callback();
+        });
+    };
+};
+
diff --git a/demo/pager.amd.min.js b/demo/pager.amd.min.js index a1d79be..40e9815 100644 --- a/demo/pager.amd.min.js +++ b/demo/pager.amd.min.js @@ -1,663 +1,4 @@ /*! pager.js - v0.3.0 - 2012-09-02 * http://oscar.finnsson.nu/pagerjs/ * Copyright (c) 2012 Oscar Finnsson; Licensed MIT */ - -define(['jquery','underscore','knockout'], function($,_,ko) { - -var pager = {}; - -// common KnockoutJS helpers -var _ko = {}; - -_ko.value = ko.utils.unwrapObservable; - -_ko.arrayValue = function (arr) { - return _.map(arr, function (e) { - return _ko.value(e); - }); -}; - -/** - * @class pager.ChildManager - */ - -/** - * - * @param {pager.Page[]} children - * @param {pager.Page} page - * @constructor - */ -pager.ChildManager = function (children, page) { - - this.currentChildO = ko.observable(null); - var me = this; - this.page = page; - - this.hideChild = function () { - if (me.currentChild) { - if (me.currentChild.getId() !== 'start') { - me.currentChild.hidePage(function () { - }); - me.currentChild = null; - me.currentChildO(null); - } - } - }; - - /** - * - * @param {String[]} route - */ - this.showChild = function (route) { - var oldCurrentChild = me.currentChild; - me.currentChild = null; - var match = false; - var currentRoute = route[0]; - var wildcard = null; - _.each(children(), function (child) { - if (!match) { - var id = child.getId(); - if (id === currentRoute || - ((currentRoute === '' || currentRoute == null) && id === 'start')) { - match = true; - me.currentChild = child; - } - if (id === '?') { - wildcard = child; - } - } - }); - // find modals in parent - but only if 1) no match is found, 2) this page got a parent and 3) this page is not a modal! - var isModal = false; - - var currentChildManager = me; - - while (!me.currentChild && currentChildManager.page.parentPage && !currentChildManager.page.getValue().modal) { - var parentChildren = currentChildManager.page.parentPage.children; - _.each(parentChildren(), function (child) { - if (!match) { - var id = child.getId(); - var modal = child.getValue().modal; - if (modal) { - if (id === currentRoute || - ((currentRoute === '' || currentRoute == null) && id === 'start')) { - match = true; - me.currentChild = child; - isModal = true; - } - if (id === '?' && !wildcard) { - wildcard = child; - isModal = true; - } - } - } - }); - if (!me.currentChild) { - currentChildManager = currentChildManager.page.parentPage.childManager; - } - } - - if (!me.currentChild && wildcard) { - me.currentChild = wildcard; - me.currentChild.currentId = currentRoute; - } - if (me.currentChild) { - me.currentChildO(me.currentChild); - - if (isModal) { - me.currentChild.currentParentPage(me.page); - } else { - me.currentChild.currentParentPage(null); - } - - } - - var onFailed = function () { - if (pager.navigationFailed) { - pager.navigationFailed(me.page, route); - } - if (me.page.getValue().navigationFailed) { - _ko.value(me.page.getValue().navigationFailed)(me.page, route); - } - }; - - if (oldCurrentChild && oldCurrentChild === me.currentChild) { - me.currentChild.showPage(route.slice(1)); - } else if (oldCurrentChild) { - oldCurrentChild.hidePage(function () { - if (me.currentChild) { - me.currentChild.showPage(route.slice(1)); - } else { - onFailed(); - } - }); - } else if (me.currentChild) { - me.currentChild.showPage(route.slice(1)); - } else { - onFailed(); - } - }; -}; - -/** - */ -pager.start = function () { - - var onHashChange = function () { - pager.routeFromHashToPage(window.location.hash); - }; - $(window).bind('hashchange', onHashChange); - onHashChange(); -}; - -/** - * - * @param viewModel - */ -pager.extendWithPage = function (viewModel) { - viewModel.$__page__ = new pager.Page(); - - pager.childManager = new pager.ChildManager(viewModel.$__page__.children, viewModel.$__page__); - viewModel.$__page__.childManager = pager.childManager; -}; - -/** - * - * Called when a route does not find a match. - * - * @type {Function} - */ -pager.navigationFailed = null; - - -/** - * - * @param {String} hash - */ -pager.routeFromHashToPage = function (hash) { - // skip # - if (hash[0] === '#') { - hash = hash.slice(1); - } - // split on '/' - var hashRoute = decodeURIComponent(hash).split('/'); - - pager.childManager.showChild(hashRoute); - -}; - -/** - * @class pager.Page - */ - -/** - * @param {Node} element - * @param {Observable} valueAccessor - * @param allBindingsAccessor - * @param {Observable} viewModel - * @param bindingContext - * @constructor - */ -pager.Page = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { - /** - * - * @type {Node} - */ - this.element = element; - /** - * - * @type {Observable} - */ - this.valueAccessor = valueAccessor; - /** - * - * @type {*} - */ - this.allBindingsAccessor = allBindingsAccessor; - /** - * - * @type {Observable} - */ - this.viewModel = viewModel; - /** - * - * @type {*} - */ - this.bindingContext = bindingContext; - - /** - * - * @type {ObservableArray} - */ - this.children = ko.observableArray([]); - - /** - * - * @type {pager.ChildManager} - */ - this.childManager = new pager.ChildManager(this.children, this); - /** - * - * @type {pager.Page} - */ - this.parentPage = null; - /** - * - * @type {String} - */ - this.currentId = null; - - /** - * - * @type {Observable/pager.Page} - */ - this.currentParentPage = ko.observable(null); - - - /** - * - * @type {Observable} - */ - this.isVisible = ko.observable(false); -}; - -/** - * @method showPage - * @param route - */ -pager.Page.prototype.showPage = function (route) { - this.isVisible(true); - this.show(); - this.childManager.showChild(route); -}; - -/** - * @method hidePage - * @param {Function} callback - */ -pager.Page.prototype.hidePage = function (callback) { - this.isVisible(false); - this.hideElementWrapper(callback); - this.childManager.hideChild(); -}; - -/** - * @method init - * @return {Object} - */ -pager.Page.prototype.init = function () { - - var value = this.getValue(); - this.parentPage = this.getParentPage(); - this.parentPage.children.push(this); - - - this.hideElement(); - - // Fetch source - if (value.source) { - this.loadSource(value.source); - } - - var ctx = null; - if (value['with']) { - ctx = _ko.value(value['with']); - } else if (value['withOnShow']) { - ctx = {}; - } else { - ctx = this.viewModel; - } - this.childBindingContext = this.bindingContext.createChildContext(ctx); - ko.utils.extend(this.childBindingContext, {$page:this}); - if (!value['withOnShow']) { - ko.applyBindingsToDescendants(this.childBindingContext, this.element); - } - return { controlsDescendantBindings:true}; -}; - -/** - * @method getValue - * @returns {Object} value - */ -pager.Page.prototype.getValue = function () { - if (this.valueAccessor) { - return _ko.value(this.valueAccessor()); - } else { - return {}; - } -}; - -/** - * @method pager.Page#getParentPage - * @return {pager.Page} - */ -pager.Page.prototype.getParentPage = function () { - // search this context/$data until either root is accessed or no page is found - var bindingContext = this.bindingContext; - while(bindingContext) { - if(bindingContext.$page) { - return bindingContext.$page; - } else if(bindingContext.$data && bindingContext.$data.$__page__) { - return bindingContext.$data.$__page__; - } - bindingContext = bindingContext.$parentContext; - } - return null; -}; - -/** - * @method pager.Page#getId - * @return String - */ -pager.Page.prototype.getId = function () { - return _ko.value(this.getValue().id); -}; - - -/** - * - * @param {Observable/String} source - * @return {Observable} - */ -pager.Page.prototype.sourceUrl = function (source) { - var me = this; - if (this.getId() === '?') { - return ko.computed(function () { - // TODO: maybe make currentId an ko.observable? - return _ko.value(source).replace('{1}', me.currentId); - }); - } else { - return ko.computed(function () { - return _ko.value(source); - }); - } -}; - -/** - * @method loadSource - * @param source - */ -pager.Page.prototype.loadSource = function (source) { - var value = this.getValue(); - var me = this; - var element = this.element; - var loader = null; - var loaderMethod = value.loader || pager.loader; - if (value.frame === 'iframe') { - var iframe = $('iframe', $(element)); - if (iframe.length === 0) { - iframe = $(''); - $(element).append(iframe); - } - if (loaderMethod) { - loader = _ko.value(loaderMethod)(me, iframe); - loader.load(); - } - if (value.sourceLoaded) { - iframe.one('load', function () { - if (loader) { - loader.unload(); - } - value.sourceLoaded(); - }); - } - // TODO: remove src binding and add this binding - ko.applyBindingsToNode(iframe[0], { - attr:{ - src:this.sourceUrl(source) - } - }); - } else { - if (loaderMethod) { - loader = _ko.value(loaderMethod)(me, me.element); - loader.load(); - } - // TODO: remove all children and add sourceUrl(source) - ko.computed(function () { - var s = _ko.value(this.sourceUrl(source)); - $(element).load(s, function () { - if (loader) { - loader.unload(); - } - ko.applyBindingsToDescendants(me.childBindingContext, me.element); - if (value.sourceLoaded) { - value.sourceLoaded.apply(me, arguments); - } - }); - }, this); - } -}; - -/** - * @method pager.Page#show - * @param {Function} callback - */ -pager.Page.prototype.show = function (callback) { - var element = this.element; - var value = this.getValue(); - this.showElementWrapper(callback); - if (this.getValue().title) { - window.document.title = this.getValue().title; - } - if (value.withOnShow) { - if (!this.withOnShowLoaded) { - this.withOnShowLoaded = true; - value.withOnShow(_.bind(function (vm) { - var childBindingContext = this.bindingContext.createChildContext(vm); - - ko.utils.extend(childBindingContext, {$page:this}); - ko.applyBindingsToDescendants(childBindingContext, this.element); - }, this)); - } - } - - // Fetch source - if (value.sourceOnShow) { - if (!value.sourceCache || - !element.__pagerLoaded__ || - (typeof(value.sourceCache) === 'number' && element.__pagerLoaded__ + value.sourceCache * 1000 < Date.now())) { - element.__pagerLoaded__ = Date.now(); - this.loadSource(value.sourceOnShow); - } - } -}; - -/** - * @method pager.Page#showElementWrapper - * @param {Function} callback - */ -pager.Page.prototype.showElementWrapper = function (callback) { - if (this.getValue().beforeShow) { - this.getValue().beforeShow(this); - } - this.showElement(callback); - if (this.getValue().afterShow) { - this.getValue().afterShow(this); - } -}; - -/** - * @method showElement - * @param {Function} callback - */ -pager.Page.prototype.showElement = function (callback) { - if (this.getValue().showElement) { - this.getValue().showElement(this, callback); - } else if (pager.showElement) { - pager.showElement(this, callback); - } else { - $(this.element).show(callback); - } -}; - -/** - * - * @param {Function} callback - */ -pager.Page.prototype.hideElementWrapper = function (callback) { - if (this.getValue().beforeHide) { - this.getValue().beforeHide(this); - } - this.hideElement(callback); - if (this.getValue().afterHide) { - this.getValue().afterHide(this); - } -}; - -/** - * - * @param {Function} callback - */ -pager.Page.prototype.hideElement = function (callback) { - if (this.getValue().hideElement) { - this.getValue().hideElement(this, callback); - } else if (pager.hideElement) { - pager.hideElement(this, callback); - } else { - $(this.element).hide(); - if (callback) { - callback(); - } - } -}; - - -/** - * - * @return {Observable} - */ -pager.Page.prototype.getFullRoute = function () { - return ko.computed(function () { - var res = null; - if (this.currentParentPage && this.currentParentPage()) { - res = this.currentParentPage().getFullRoute()(); - res.push(this.getId()); - return res; - } else if (this.parentPage) { - res = this.parentPage.getFullRoute()(); - res.push(this.getId()); - return res; - } else { // is root page - return []; - } - }, this); -}; - -ko.bindingHandlers.page = { - init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { - var page = new pager.Page(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); - return page.init(); - }, - update:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { - } -}; - -// page-href - -/** - * - * @type {Boolean} - */ -pager.useHTML5history = false; -/** - * - * @type {String} - */ -pager.rootURI = '/'; - -// TODO: extract this into a separate class pager.PageHref -ko.bindingHandlers['page-href'] = { - init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { - var $page = bindingContext.$page || bindingContext.$data.$page; - var page = $page; - - // The href reacts to changes in the value - var path = ko.computed(function () { - var value = _ko.value(valueAccessor()); - var parentsToTrim = 0; - while (value.substring(0, 3) === '../') { - parentsToTrim++; - value = value.slice(3); - } - - var fullRoute = page.getFullRoute()(); - var parentPath = fullRoute.slice(0, fullRoute.length - parentsToTrim).join('/'); - var fullPath = (parentPath === '' ? '' : parentPath + '/') + value; - var attr = { - 'href':'#' + fullPath - }; - $(element).attr(attr); - return fullPath; - }); - - if (pager.useHTML5history && window.history && history.pushState) { - $(element).click(function (e) { - e.preventDefault(); - history.pushState(null, null, pager.rootURI + path()); - pager.childManager.showChild(path().split('/')); - - }); - } - - - }, - update:function () { - } -}; - -/** - * @class pager.PageAccordionItem - * @inherits pager.Page - */ - -/** - * - * @param {Node} element - * @param {Observable} valueAccessor - * @param allBindingsAccessor - * @param {Observable} viewModel - * @param bindingContext - * @constructor - */ -pager.PageAccordionItem = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { - pager.Page.apply(this, arguments); -}; - -pager.PageAccordionItem.prototype = new pager.Page(); - -/** - * - * @return {Node} - */ -pager.PageAccordionItem.prototype.getAccordionBody = function () { - return $(this.element).children()[1]; -}; - -pager.PageAccordionItem.prototype.hideElement = function (callback) { - if (!this.pageAccordionItemHidden) { - this.pageAccordionItemHidden = true; - $(this.getAccordionBody()).hide(); - } else { - $(this.getAccordionBody()).slideUp(); - if (callback) { - callback(); - } - } -}; - -pager.PageAccordionItem.prototype.showElement = function (callback) { - $(this.getAccordionBody()).slideDown(); - if (callback) { - callback(); - } -}; - -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 () { - } -}; -return pager;}); +define(["jquery","underscore","knockout"],function(a,b,c){var d={},e={};return e.value=c.utils.unwrapObservable,e.arrayValue=function(a){return b.map(a,function(a){return e.value(a)})},d.ChildManager=function(a,f){this.currentChildO=c.observable(null);var g=this;this.page=f,this.hideChild=function(){g.currentChild&&g.currentChild.getId()!=="start"&&(g.currentChild.hidePage(function(){}),g.currentChild=null,g.currentChildO(null))},this.showChild=function(c){var f=g.currentChild;g.currentChild=null;var h=!1,i=c[0],j=null;b.each(a(),function(a){if(!h){var b=a.getId();if(b===i||(i===""||i==null)&&b==="start")h=!0,g.currentChild=a;b==="?"&&(j=a)}});var k=!1,l=g;while(!g.currentChild&&l.page.parentPage&&!l.page.getValue().modal){var m=l.page.parentPage.children;b.each(m(),function(a){if(!h){var b=a.getId(),c=a.getValue().modal;if(c){if(b===i||(i===""||i==null)&&b==="start")h=!0,g.currentChild=a,k=!0;b==="?"&&!j&&(j=a,k=!0)}}}),g.currentChild||(l=l.page.parentPage.childManager)}!g.currentChild&&j&&(g.currentChild=j,g.currentChild.currentId=i),g.currentChild&&(g.currentChildO(g.currentChild),k?g.currentChild.currentParentPage(g.page):g.currentChild.currentParentPage(null));var n=function(){d.navigationFailed&&d.navigationFailed(g.page,c),g.page.getValue().navigationFailed&&e.value(g.page.getValue().navigationFailed)(g.page,c)};f&&f===g.currentChild?g.currentChild.showPage(c.slice(1)):f?f.hidePage(function(){g.currentChild?g.currentChild.showPage(c.slice(1)):n()}):g.currentChild?g.currentChild.showPage(c.slice(1)):n()}},d.start=function(){var b=function(){d.routeFromHashToPage(window.location.hash)};a(window).bind("hashchange",b),b()},d.extendWithPage=function(a){a.$__page__=new d.Page,d.childManager=new d.ChildManager(a.$__page__.children,a.$__page__),a.$__page__.childManager=d.childManager},d.navigationFailed=null,d.routeFromHashToPage=function(a){a[0]==="#"&&(a=a.slice(1));var b=decodeURIComponent(a).split("/");d.childManager.showChild(b)},d.Page=function(a,b,e,f,g){this.element=a,this.valueAccessor=b,this.allBindingsAccessor=e,this.viewModel=f,this.bindingContext=g,this.children=c.observableArray([]),this.childManager=new d.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.currentParentPage=c.observable(null),this.isVisible=c.observable(!1)},d.Page.prototype.showPage=function(a){this.isVisible(!0),this.show(),this.childManager.showChild(a)},d.Page.prototype.hidePage=function(a){this.isVisible(!1),this.hideElementWrapper(a),this.childManager.hideChild()},d.Page.prototype.init=function(){var a=this.getValue();this.parentPage=this.getParentPage(),this.parentPage.children.push(this),this.hideElement(),a.source&&this.loadSource(a.source);var b=null;return a["with"]?b=e.value(a["with"]):a.withOnShow?b={}:b=this.viewModel,this.childBindingContext=this.bindingContext.createChildContext(b),c.utils.extend(this.childBindingContext,{$page:this}),a.withOnShow||c.applyBindingsToDescendants(this.childBindingContext,this.element),{controlsDescendantBindings:!0}},d.Page.prototype.getValue=function(){return this.valueAccessor?e.value(this.valueAccessor()):{}},d.Page.prototype.getParentPage=function(){var a=this.bindingContext;while(a){if(a.$page)return a.$page;if(a.$data&&a.$data.$__page__)return a.$data.$__page__;a=a.$parentContext}return null},d.Page.prototype.getId=function(){return e.value(this.getValue().id)},d.Page.prototype.sourceUrl=function(a){var b=this;return this.getId()==="?"?c.computed(function(){return e.value(a).replace("{1}",b.currentId)}):c.computed(function(){return e.value(a)})},d.Page.prototype.loadSource=function(b){var f=this.getValue(),g=this,h=this.element,i=null,j=f.loader||d.loader;if(f.frame==="iframe"){var k=a("iframe",a(h));k.length===0&&(k=a(""),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded()}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){if(typeof e.value(b)=="string"){var d=e.value(this.sourceUrl(b));a(h).load(d,function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded.apply(g,arguments)})}else e.value(b)(this,function(){f.sourceLoaded&&f.sourceLoaded()})},this)},d.Page.prototype.show=function(a){var d=this.element,e=this.getValue();this.showElementWrapper(a),this.getValue().title&&(window.document.title=this.getValue().title),e.withOnShow&&(this.withOnShowLoaded||(this.withOnShowLoaded=!0,e.withOnShow(b.bind(function(a){var b=this.bindingContext.createChildContext(a);c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,this.element)},this)))),e.sourceOnShow&&(!e.sourceCache||!d.__pagerLoaded__||typeof e.sourceCache=="number"&&d.__pagerLoaded__+e.sourceCache*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded()}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){var d=e.value(this.sourceUrl(b));a(h).load(d,function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded.apply(g,arguments)})},this)},d.Page.prototype.show=function(a){var d=this.element,e=this.getValue();this.showElementWrapper(a),this.getValue().title&&(window.document.title=this.getValue().title),e.withOnShow&&(this.withOnShowLoaded||(this.withOnShowLoaded=!0,e.withOnShow(b.bind(function(a){var b=this.bindingContext.createChildContext(a);c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,this.element)},this)))),e.sourceOnShow&&(!e.sourceCache||!d.__pagerLoaded__||typeof e.sourceCache=="number"&&d.__pagerLoaded__+e.sourceCache*1e3"),a(h).append(k)),j&&(i=e.value(j)(g,k),i.load()),f.sourceLoaded&&k.one("load",function(){i&&i.unload(),f.sourceLoaded()}),c.applyBindingsToNode(k[0],{attr:{src:this.sourceUrl(b)}})}else j&&(i=e.value(j)(g,g.element),i.load()),c.computed(function(){if(typeof e.value(b)=="string"){var d=e.value(this.sourceUrl(b));a(h).load(d,function(){i&&i.unload(),c.applyBindingsToDescendants(g.childBindingContext,g.element),f.sourceLoaded&&f.sourceLoaded.apply(g,arguments)})}else e.value(b)(this,function(){f.sourceLoaded&&f.sourceLoaded()})},this)},d.Page.prototype.show=function(a){var d=this.element,e=this.getValue();this.showElementWrapper(a),this.getValue().title&&(window.document.title=this.getValue().title),e.withOnShow&&(this.withOnShowLoaded||(this.withOnShowLoaded=!0,e.withOnShow(b.bind(function(a){var b=this.bindingContext.createChildContext(a);c.utils.extend(b,{$page:this}),c.applyBindingsToDescendants(b,this.element)},this)))),e.sourceOnShow&&(!e.sourceCache||!d.__pagerLoaded__||typeof e.sourceCache=="number"&&d.__pagerLoaded__+e.sourceCache*1e3"),$(d).append(g)),f&&(e=_ko.value(f)(c,g),e.load()),b.sourceLoaded&&g.one("load",function(){e&&e.unload(),b.sourceLoaded()}),ko.applyBindingsToNode(g[0],{attr:{src:this.sourceUrl(a)}})}else f&&(e=_ko.value(f)(c,c.element),e.load()),ko.computed(function(){var f=_ko.value(this.sourceUrl(a));$(d).load(f,function(){e&&e.unload(),ko.applyBindingsToDescendants(c.childBindingContext,c.element),b.sourceLoaded&&b.sourceLoaded.apply(c,arguments)})},this)},pager.Page.prototype.show=function(a){var b=this.element,c=this.getValue();this.showElementWrapper(a),this.getValue().title&&(window.document.title=this.getValue().title),c.withOnShow&&(this.withOnShowLoaded||(this.withOnShowLoaded=!0,c.withOnShow(_.bind(function(a){var b=this.bindingContext.createChildContext(a);ko.utils.extend(b,{$page:this}),ko.applyBindingsToDescendants(b,this.element)},this)))),c.sourceOnShow&&(!c.sourceCache||!b.__pagerLoaded__||typeof c.sourceCache=="number"&&b.__pagerLoaded__+c.sourceCache*1e3"),$(d).append(g)),f&&(e=_ko.value(f)(c,g),e.load()),b.sourceLoaded&&g.one("load",function(){e&&e.unload(),b.sourceLoaded()}),ko.applyBindingsToNode(g[0],{attr:{src:this.sourceUrl(a)}})}else f&&(e=_ko.value(f)(c,c.element),e.load()),ko.computed(function(){if(typeof _ko.value(a)=="string"){var f=_ko.value(this.sourceUrl(a));$(d).load(f,function(){e&&e.unload(),ko.applyBindingsToDescendants(c.childBindingContext,c.element),b.sourceLoaded&&b.sourceLoaded.apply(c,arguments)})}else _ko.value(a)(this,function(){b.sourceLoaded&&b.sourceLoaded()})},this)},pager.Page.prototype.show=function(a){var b=this.element,c=this.getValue();this.showElementWrapper(a),this.getValue().title&&(window.document.title=this.getValue().title),c.withOnShow&&(this.withOnShowLoaded||(this.withOnShowLoaded=!0,c.withOnShow(_.bind(function(a){var b=this.bindingContext.createChildContext(a);ko.utils.extend(b,{$page:this}),ko.applyBindingsToDescendants(b,this.element)},this)))),c.sourceOnShow&&(!c.sourceCache||!b.__pagerLoaded__||typeof c.sourceCache=="number"&&b.__pagerLoaded__+c.sourceCache*1e3