Permalink
Browse files

Updating tests and rebuilding minified files after merge

  • Loading branch information...
1 parent 32fb640 commit 0df31fd806f39d6032d1c9fdd9ac4f6b08634cae @finnsson committed Mar 23, 2013
View
4 dist/pager.min.js
@@ -1,4 +1,4 @@
-/*! pager.js - v0.7.0 - 2013-02-20
+/*! pager.js - v0.7.0 - 2013-03-23
* http://oscar.finnsson.nu/pagerjs/
* Copyright (c) 2013 Oscar Finnsson; Licensed MIT */
-(function(e){var t=e.History,n=function(n,r){"use strict";var i=function(e,t){return function(){var n=arguments;return r.computed(function(){return e.apply(t,n)})}},s={};s.page=null,s.now=function(){return Date.now?Date.now():(new Date).valueOf()},s.extendWithPage=function(e){var t=new s.Page;e.$__page__=t,s.page=t},s.navigationFailed=r.observable(),s.onBindingError=n.Callbacks(),s.onSourceError=n.Callbacks(),s.showChild=function(e){var t=e&&e.length===1&&e[0]===""?[]:e;s.page.showPage(t)},s.getParentPage=function(e){while(e){if(e.$page&&e.$page.val("urlToggle")!=="none")return e.$page;if(e.$data&&e.$data.$__page__)return e.$data.$__page__;e=e.$parentContext}return null};var o=null,u=null,a=function(e){u&&u.reject({cancel:!0}),o=null,e.substring(0,s.Href.hash.length)===s.Href.hash&&(e=e.slice(s.Href.hash.length));var t=f(e);s.showChild(t)};s.navigate=function(e){s.useHTML5history?s.Href5.history.pushState(null,null,e):location.hash=e};var f=function(e){return n.map(e.replace(/\+/g," ").split("/"),decodeURIComponent)},l={};l.value=r.utils.unwrapObservable,l.arrayValue=function(e){return n.map(e,function(e){return l.value(e)})};var c=function(e){var t,n={},r=/([^&=]+)=?([^&]*)/g;while(t=r.exec(e))n[t[1]]=t[2];return n},h=function(e){if(!e)return{name:null,params:{}};var t=e.split("?"),n=t[0],r=t[1],i={};return r&&(i=c(r)),{name:n,params:i}};s.ChildManager=function(e,t){this.currentChildO=r.observable(null);var i=this;this.page=t,this.timeStamp=s.now(),this.hideChild=function(){i.currentChild&&i.currentChild.getId()!=="start"&&(i.currentChild.hidePage(function(){}),i.currentChild=null,i.currentChildO(null))},this.showChild=function(t){var r=t.length===0;this.timeStamp=s.now();var o=this.timeStamp,u=i.currentChild;i.currentChild=null;var a=!1,f=h(t[0]),c=f.name,p=null;n.each(e(),function(e,t){if(!a){var n=t.getId(),r=t.getRole();if(n===c||(c===""||c==null)&&(n==="start"||r==="start"))a=!0,i.currentChild=t;n==="?"&&(p=t)}});var d=!1,v=i,m=function(e,t){if(!a){var n=t.getId(),r=t.getValue().modal;if(r){if(n===c||(c===""||c==null)&&n==="start")a=!0,i.currentChild=t,d=!0;n==="?"&&!p&&(p=t,d=!0)}}};while(!i.currentChild&&v.page.parentPage&&!v.page.getValue().modal){var g=v.page.parentPage.children;n.each(g(),m),i.currentChild||(v=v.page.parentPage.childManager)}!i.currentChild&&p&&!r&&(i.currentChild=p),i.currentChild&&(i.currentChildO(i.currentChild),d?i.currentChild.currentParentPage(i.page):i.currentChild.currentParentPage(null));var y=function(){s.navigationFailed&&s.navigationFailed({page:i.page,route:t}),i.page.getValue().navigationFailed&&l.value(i.page.getValue().navigationFailed)(i.page,t)},b=function(){var e=l.value(i.currentChild.getValue().guard);e?e(i.currentChild,t,function(){i.timeStamp===o&&i.currentChild.showPage(t.slice(1),f,t[0])},u):i.currentChild.showPage(t.slice(1),f,t[0])};u&&u===i.currentChild?b():u?u.hidePage(function(){i.currentChild?b():y()}):i.currentChild?b():y()}},s.Page=function(e,t,n,i,o){this.element=e,this.valueAccessor=t,this.allBindingsAccessor=n,this.viewModel=i,this.bindingContext=o,this.children=r.observableArray([]),this.childManager=new s.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.getCurrentId=r.observable(),this.ctx=null,this.currentParentPage=r.observable(null),this.isVisible=r.observable(!1),this.originalRoute=r.observable(null),this.route=null};var p=s.Page.prototype;p.val=function(e){return l.value(this.getValue()[e])},p.currentChildPage=function(){return this.childManager.currentChildO},p.find=function(e){var t=l.value(e),r=this;if(t.substring(0,1)==="/")r=s.page,t=t.slice(1);else while(t.substring(0,3)==="../")r=r.currentParentPage&&r.currentParentPage()?r.currentParentPage():r.parentPage,t=t.slice(3);var i=f(t);return n.each(i,function(e,t){r=r.child(t)()}),r},p.find$=function(e){return i(this.find,this)(e)},p.path=function(e){var t=this,r=l.value(e);if(r&&typeof r=="object"&&r.path&&r.params&&!(r instanceof s.Page)){var i=r.path,o=r.params;return t.path(i)+"?"+n.param(o)}var u;if(r==null||r==="")u=t;else{if(!(r instanceof s.Page)){if(r.substring(0,1)==="/")return s.page.getFullRoute()()+r.substring(1);var a=0;while(r.substring(0,3)==="../")a++,r=r.slice(3);var f=t.getFullRoute()(),c=f.slice(0,f.length-a).join("/"),h=(c===""?"":c+"/")+r;return s.useHTML5history?n("base").attr("href")+h:s.Href.hash+h}u=r}var p=u.getFullRoute()().join("/");return s.useHTML5history?n("base").attr("href")+p:s.Href.hash+p},p.path$=function(e){return i(this.path,this)(e)},p.async=function(e,t,n,r){var i=this;return function(){u&&u.reject({cancel:!0});var a=e();u=a,r&&r(a.state());var f=Math.random();o=f,a.done(function(){r&&r(a.state()),f===o&&s.navigate(i.path(t))}),a.fail(function(e){r&&r(a.state());var t=e&&e.cancel;f===o&&!t&&n&&s.navigate(i.path(n))})}},p.showPage=function(e,t,n){var r=this,i=r.currentId,s=r.pageRoute?r.pageRoute.params:null,o=r.isVisible();r.currentId=t?t.name||"":"",r.getCurrentId(r.currentId),r.isVisible(!0),n&&r.originalRoute(n),r.route=e,r.pageRoute=t,o?(r.getId()==="?"&&i!==r.currentId&&r.show(),t&&s!==t.params&&r.setParams()):(r.setParams(),r.show()),r.childManager.showChild(e)},p.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var e=this.pageRoute.params,t=this.ctx,i=this.val("params")||{};n.isArray(i)?n.each(i,function(n,i){var s=e[i];t[i]?t[i](s):t[i]=r.observable(s)}):n.each(i,function(n,i){var s=e[n],o;s==null?o=l.value(i):o=s,t[n]?t[n](o):t[n]=r.observable(o)})}if(this.pageRoute){var s=this.getValue().nameParam;s&&(typeof s=="string"?this.ctx[s]?this.ctx[s](this.currentId):this.ctx[s]=r.observable(this.currentId):s(this.currentId))}},p.hidePage=function(e){var t=this;"show"!==t.val("urlToggle")?(t.hideElementWrapper(e),t.childManager.hideChild()):e&&e()};var d=function(e){try{r.applyBindingsToDescendants(e.childBindingContext,e.element)}catch(t){var n=e.val("onBindingError");n&&n(e.e),s.onBindingError.fire({page:e,error:t})}};p.init=function(){var e=this,t=e.val("urlToggle"),i=e.val("id");i!=="?"&&e.getCurrentId(i);var s=r.utils.domData.get(e.element,"__ko_pagerjsBindingData");if(s)return{controlsDescendantBindings:!0};r.utils.domData.set(e.element,"__ko_pagerjsBindingData",e),r.utils.domNodeDisposal.addDisposeCallback(e.element,function(){var t=e.val("beforeRemove");t&&t({page:e}),e.parentPage&&e.parentPage.children.remove(e);var n=e.val("afterRemove");n&&n({page:e})});var o=e.getValue();t!=="none"&&(e.parentPage=e.getParentPage(),e.parentPage.children.push(this),e.hideElement()),e.val("source")&&e.loadSource(e.val("source")),e.ctx=null;if(o.withOnShow)e.ctx={},e.childBindingContext=e.bindingContext.createChildContext(e.ctx),r.utils.extend(e.childBindingContext,{$page:this});else{var u=o["with"]||e.bindingContext.$observableData||e.viewModel;e.ctx=l.value(u),e.augmentContext();if(r.isObservable(u)){var a=r.observable(e.ctx);e.childBindingContext=e.bindingContext.createChildContext(a),r.utils.extend(e.childBindingContext,{$page:this,$observableData:u}),d(e),u.subscribe(function(){a(l.value(u))})}else e.childBindingContext=e.bindingContext.createChildContext(e.ctx),r.utils.extend(e.childBindingContext,{$page:this,$observableData:undefined}),d(e)}if(t!=="none")e.parentPage.route&&e.parentPage.route[0]===e.getId()&&setTimeout(function(){e.parentPage.showPage(e.parentPage.route)},0);else{var f=function(){n(e.element).is(":visible")&&e.showPage([])};setTimeout(f,0),e.getParentPage().isVisible.subscribe(function(e){e&&setTimeout(f,0)})}var c=e.getValue().bind;return r.isObservable(c)&&c(e),{controlsDescendantBindings:!0}},p.augmentContext=function(){var e=this,t=e.val("params");t&&(n.isArray(t)?n.each(t,function(t,n){e.ctx[n]||(e.ctx[n]=r.observable())}):n.each(t,function(n,i){e.ctx[n]||(r.isObservable(i)?e.ctx[n]=i:i===null?(t[n]=r.observable(null),e.ctx[n]=r.observable(null)):e.ctx[n]=r.observable(i))})),this.val("vars")&&n.each(this.val("vars"),function(t,n){r.isObservable(n)?e.ctx[t]=n:e.ctx[t]=r.observable(n)});var i=this.getValue().nameParam;i&&typeof i=="string"&&(e.ctx[i]=r.observable(null)),this.setParams()},p.getValue=function(){return this.valueAccessor?l.value(this.valueAccessor()):{}},p.getParentPage=function(){return s.getParentPage(this.bindingContext)},p.getId=function(){return this.val("id")},p.id=function(){var e=this.getCurrentId();return e==null||e===""?this.getId():e},p.sourceUrl=function(e){var t=this;return this.getId()==="?"?r.computed(function(){var n;return t.val("deep")?n=[t.currentId].concat(t.route).join("/"):n=t.currentId,l.value(e).replace("{1}",n)}):r.computed(function(){return l.value(e)})},p.loadWithOnShow=function(){var e=this;if(!e.withOnShowLoaded||e.val("sourceCache")!==!0)e.withOnShowLoaded=!0,e.val("withOnShow")(function(t){var n=e.bindingContext.createChildContext(t);e.ctx=t,e.childBindingContext=n,e.augmentContext(),r.utils.extend(n,{$page:e}),d(e)},e)},p.loadSource=function(e){var t=this.getValue(),i=this,o=this.element,u=null,a=t.loader||s.loader;if(t.frame==="iframe"){var f=n("iframe",n(o));f.length===0&&(f=n("<iframe></iframe>"),n(o).append(f)),a&&(u=l.value(a)(i,f),u.load()),f.one("load",function(){u&&u.unload(),t.sourceLoaded&&t.sourceLoaded(i)}),r.applyBindingsToNode(f[0],{attr:{src:this.sourceUrl(e)}})}else{a&&(u=l.value(a)(i,i.element),u.load());var c=function(){u&&u.unload(),i.val("withOnShow")?i.val("withOnShow")&&i.loadWithOnShow():d(i),t.sourceLoaded&&t.sourceLoaded(i),i.route&&i.childManager.showChild(i.route)};if(typeof l.value(e)=="string"){var h=l.value(this.sourceUrl(e));m(o,h,function(){c()},i)}else{var p=n(o).children();l.value(e)(this,function(){n.each(p,function(e,t){r.utils.domNodeDisposal.removeNode(t)}),c()})}}};var v=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,m=function(e,t,i,o){var u,a,f,l=n(e),c=t.indexOf(" ");c>=0&&(u=t.slice(c,t.length),t=t.slice(0,c));var h=jQuery.ajax({url:t,type:"GET",dataType:"html",complete:function(e,t){i&&l.each(i,f||[e.responseText,t,e])}}).done(function(e){f=arguments,n.each(l.children(),function(e,t){r.utils.domNodeDisposal.removeNode(t)}),l.html(u?jQuery("<div>").append(e.replace(v,"")).find(u):e)});return h.fail(function(){o.val("onSourceError")&&o.val("onSourceError")({url:t,page:o,xhrPromise:h}),s.onSourceError.fire({url:t,page:o,xhrPromise:h})}),l};p.show=function(t){var n=this.element,r=this;r.showElementWrapper(t),r.val("title")&&(e.document.title=r.val("title"));if(r.val("sourceOnShow")){if(!r.val("sourceCache")||!n.__pagerLoaded__||typeof r.val("sourceCache")=="number"&&n.__pagerLoaded__+r.val("sourceCache")*1e3<s.now())n.__pagerLoaded__=s.now(),r.loadSource(r.val("sourceOnShow"))}else r.val("withOnShow")&&r.loadWithOnShow()},p.showElementWrapper=function(e){var t=this;t.val("beforeShow")&&t.val("beforeShow")(this),t.showElement(e),t.val("scrollToTop")&&t.element.scrollIntoView(),t.val("afterShow")&&t.val("afterShow")(this)},p.showElement=function(e){this.val("showElement")?this.val("showElement")(this,e):this.val("fx")?s.fx[this.val("fx")].showElement(this,e):s.showElement?s.showElement(this,e):n(this.element).show(e)},p.hideElementWrapper=function(e){this.isVisible(!1),this.val("beforeHide")&&this.val("beforeHide")(this),this.hideElement(e),this.val("afterHide")&&this.val("afterHide")(this)},p.hideElement=function(e){this.val("hideElement")?this.val("hideElement")(this,e):this.val("fx")?s.fx[this.val("fx")].hideElement(this,e):s.hideElement?s.hideElement(this,e):(n(this.element).hide(),e&&e())},p.getFullRoute=function(){return this._fullRoute?this._fullRoute:(this._fullRoute=r.computed(function(){var e=null;return this.currentParentPage&&this.currentParentPage()?(e=this.currentParentPage().getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):this.parentPage?(e=this.parentPage.getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):[]},this),this._fullRoute)},p.getRole=function(){return this.val("role")||"next"},p.nullObject=new s.Page,p.nullObject.children=r.observableArray([]),p.child=function(e){var t=this;return t._child==null&&(t._child={}),t._child[e]||(t._child[e]=r.computed(function(){var t=n.grep(this.children(),function(t){return t.id()===e})[0];return t||this.nullObject},this)),t._child[e]},r.bindingHandlers.page={init:function(e,t,n,r,i){var o=null;return l.value(t())instanceof s.Page?(o=l.value(t()),o.element=e,o.allBindingsAccessor==null&&(o.allBindingsAccessor=n),o.viewModel==null&&(o.viewModel=r),o.bindingContext==null&&(o.bindingContext=i)):o=new s.Page(e,t,n,r,i),o.init()}},s.useHTML5history=!1,s.rootURI="/",s.Href=function(e,t,n,i,s){this.element=e,this.bindingContext=s,this.path=r.observable(),this.pageOrRelativePath=r.observable(t)};var g=s.Href.prototype;return g.getParentPage=function(){return s.getParentPage(this.bindingContext)},g.init=function(){var e=this,t=e.getParentPage();e.path=r.computed(function(){var n=l.value(e.pageOrRelativePath()());return t.path(n)})},s.Href.hash="#",g.bind=function(){r.applyBindingsToNode(this.element,{attr:{href:this.path}})},g.update=function(e){this.pageOrRelativePath(e)},s.Href5=function(e,t,n,r,i){s.Href.apply(this,arguments)},s.Href5.prototype=new s.Href,s.Href5.history=e.history,s.Href5.prototype.bind=function(){var e=this;r.applyBindingsToNode(e.element,{attr:{href:e.path},click:function(){var t=e.path();if(t===""||t==="/")t=n("base").attr("href");s.Href5.history.pushState(null,null,t)}})},r.bindingHandlers["page-hash"]={init:function(e,t,n,r,i){var o=new s.Href(e,t,n,r,i);o.init(),o.bind(),e.__ko__page=o},update:function(e,t){e.__ko__page.update(t)}},r.bindingHandlers["page-href5"]={init:function(e,t,n,r,i){var o=new s.Href5(e,t,n,r,i);o.init(),o.bind(),e.__ko__page=o},update:function(e,t){e.__ko__page.update(t)}},r.bindingHandlers["page-href"]={init:function(e,t,n,r,i){var o=s.useHTML5history?s.Href5:s.Href,u=new o(e,t,n,r,i);u.init(),u.bind(),e.__ko__page=u},update:function(e,t){e.__ko__page.update(t)}},s.fx={},s.fx.cssAsync=function(e){return{showElement:function(t,r){var i=n(t.element);i.addClass(e),i.show();var s=setInterval(function(){clearInterval(s),i.addClass(e+"-in")},10),o=setInterval(function(){clearInterval(o),r&&r()},300)},hideElement:function(t,r){var i=n(t.element);if(!t.pageHiddenOnce)t.pageHiddenOnce=!0,i.hide();else{i.removeClass(e+"-in");var s=setInterval(function(){clearInterval(s),r&&r(),i.hide()},300)}}}},s.fx.zoom=s.fx.cssAsync("pagerjs-fx-zoom"),s.fx.flip=s.fx.cssAsync("pagerjs-fx-flip"),s.fx.popout=s.fx.cssAsync("pagerjs-fx-popout-modal"),s.fx.jQuerySync=function(e,t){return{showElement:function(t,r){e.call(n(t.element),300,r)},hideElement:function(e,r){t.call(n(e.element),300,function(){n(e.element).hide()}),r&&r()}}},s.fx.slide=s.fx.jQuerySync(n.fn.slideDown,n.fn.slideUp),s.fx.fade=s.fx.jQuerySync(n.fn.fadeIn,n.fn.fadeOut),s.startHistoryJs=function(r){r&&s.Href5.history.pushState(null,null,r),t.Adapter.bind(e,"statechange",function(){var e=n("base").attr("href"),r=t.getState().url.replace(e,"");a(r)}),t.Adapter.bind(e,"anchorchange",function(){a(location.hash)}),a(t.getState().url.replace(t.getRootUrl(),""))},s.startHashChange=function(t){t&&(e.location.hash=s.Href.hash+t),n(e).hashchange(function(){a(e.location.hash)}),n(e).hashchange()},s.start=function(t){t&&(e.location.hash=s.Href.hash+t);var r=function(){a(e.location.hash)};n(e).bind("hashchange",r),r()},s},r=e.define;typeof r=="function"&&typeof r.amd=="object"&&r.amd?r(["knockout","jquery"],function(e){return n($,e)}):e.pager=n($,ko)})(window);
+(function(e){var t=function(t,n){"use strict";var r=function(e,t){return function(){var r=arguments;return n.computed(function(){return e.apply(t,r)})}},i={};i.page=null,i.now=function(){return Date.now?Date.now():(new Date).valueOf()},i.extendWithPage=function(e){var t=new i.Page;e.$__page__=t,i.page=t};var s=function(e,t,n){n=n||{},n.page=e,i[t].fire(n),e.val(t)&&e.val(t)(n)};t.each(["onBindingError","onSourceError","onNoMatch","beforeRemove","afterRemove","beforeHide","afterHide","beforeShow","afterShow"],function(e,n){i[n]=t.Callbacks()}),i.showChild=function(e){var t=e&&e.length===1&&e[0]===""?[]:e;i.page.showPage(t)},i.getParentPage=function(e){while(e){if(e.$page&&e.$page.val("urlToggle")!=="none")return e.$page;if(e.$data&&e.$data.$__page__)return e.$data.$__page__;e=e.$parentContext}return null};var o=null,u=null,a=function(e){u&&u.reject({cancel:!0}),o=null,e.substring(0,i.Href.hash.length)===i.Href.hash&&(e=e.slice(i.Href.hash.length));var t=f(e);i.showChild(t)};i.goTo=a,i.navigate=function(e){i.useHTML5history?i.Href5.history.pushState(null,null,e):location.hash=e};var f=function(e){return t.map(e.replace(/\+/g," ").split("/"),decodeURIComponent)},l={};l.value=n.utils.unwrapObservable,l.arrayValue=function(e){return t.map(e,function(e){return l.value(e)})};var c=function(e){var t,n={},r=/([^&=]+)=?([^&]*)/g;while(t=r.exec(e))n[t[1]]=t[2];return n},h=function(e){if(!e)return{name:null,params:{}};var t=e.split("?"),n=t[0],r=t[1],i={};return r&&(i=c(r)),{name:n,params:i}};i.ChildManager=function(e,r){this.currentChildO=n.observable(null);var o=this;this.page=r,this.timeStamp=i.now(),this.hideChild=function(){o.currentChild&&o.currentChild.getId()!=="start"&&(o.currentChild.hidePage(function(){}),o.currentChild=null,o.currentChildO(null))},this.showChild=function(n){var r=n.length===0;this.timeStamp=i.now();var u=this.timeStamp,a=o.currentChild;o.currentChild=null;var f=!1,c=h(n[0]),p=c.name,d=null;t.each(e(),function(e,t){if(!f){var n=t.getId(),r=t.getRole();if(n===p||(p===""||p==null)&&(n==="start"||r==="start"))f=!0,o.currentChild=t;n==="?"&&(d=t)}});var v=!1,m=o,g=function(e,t){if(!f){var n=t.getId(),r=t.getValue().modal;if(r){if(n===p||(p===""||p==null)&&n==="start")f=!0,o.currentChild=t,v=!0;n==="?"&&!d&&(d=t,v=!0)}}};while(!o.currentChild&&m.page.parentPage&&!m.page.getValue().modal){var y=m.page.parentPage.children;t.each(y(),g),o.currentChild||(m=m.page.parentPage.childManager)}!o.currentChild&&d&&!r&&(o.currentChild=d),o.currentChild&&(o.currentChildO(o.currentChild),v?o.currentChild.currentParentPage(o.page):o.currentChild.currentParentPage(null));var b=function(){s(o.page,"onNoMatch",{route:n})},w=function(){var e=l.value(o.currentChild.getValue().guard);e?e(o.currentChild,n,function(){o.timeStamp===u&&o.currentChild.showPage(n.slice(1),c,n[0])},a):o.currentChild.showPage(n.slice(1),c,n[0])};a&&a===o.currentChild?w():a?a.hidePage(function(){o.currentChild?w():b()}):o.currentChild?w():b()}},i.Page=function(e,t,r,s,o){this.element=e,this.valueAccessor=t,this.allBindingsAccessor=r,this.viewModel=s,this.bindingContext=o,this.children=n.observableArray([]),this.childManager=new i.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.getCurrentId=n.observable(),this.ctx=null,this.currentParentPage=n.observable(null),this.isVisible=n.observable(!1),this.originalRoute=n.observable(null),this.route=null};var p=i.Page.prototype;p.val=function(e){return l.value(this.getValue()[e])},p.currentChildPage=function(){return this.childManager.currentChildO},p.find=function(e){var n=l.value(e),r=this;if(n.substring(0,1)==="/")r=i.page,n=n.slice(1);else while(n.substring(0,3)==="../")r=r.currentParentPage&&r.currentParentPage()?r.currentParentPage():r.parentPage,n=n.slice(3);var s=f(n);return t.each(s,function(e,t){r=r.child(t)()}),r},p.find$=function(e){return r(this.find,this)(e)},p.path=function(e){var n=this,r=l.value(e);if(r&&typeof r=="object"&&r.path&&r.params&&!(r instanceof i.Page)){var s=r.path,o=r.params;return n.path(s)+"?"+t.param(o)}var u;if(r==null||r==="")u=n;else{if(!(r instanceof i.Page)){if(r.substring(0,1)==="/")return i.page.getFullRoute()()+r.substring(1);var a=0;while(r.substring(0,3)==="../")a++,r=r.slice(3);var f=n.getFullRoute()(),c=f.slice(0,f.length-a).join("/"),h=(c===""?"":c+"/")+r;return i.useHTML5history?t("base").attr("href")+h:i.Href.hash+h}u=r}var p=u.getFullRoute()().join("/");return i.useHTML5history?t("base").attr("href")+p:i.Href.hash+p},p.path$=function(e){return r(this.path,this)(e)},p.async=function(e,t,n,r){var s=this;return function(){u&&u.reject({cancel:!0});var a=e();u=a,r&&r(a.state());var f=Math.random();o=f,a.done(function(){r&&r(a.state()),f===o&&i.navigate(s.path(t))}),a.fail(function(e){r&&r(a.state());var t=e&&e.cancel;f===o&&!t&&n&&i.navigate(s.path(n))})}},p.showPage=function(e,t,n){var r=this,i=r.currentId,s=r.pageRoute?r.pageRoute.params:null,o=r.isVisible();r.currentId=t?t.name||"":"",r.getCurrentId(r.currentId),r.isVisible(!0),n&&r.originalRoute(n),r.route=e,r.pageRoute=t,o?(r.getId()==="?"&&i!==r.currentId&&r.show(),t&&s!==t.params&&r.setParams()):(r.setParams(),r.show()),r.childManager.showChild(e)},p.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var e=this.pageRoute.params,r=this.ctx,i=this.val("params")||{};t.isArray(i)?t.each(i,function(t,i){var s=e[i];r[i]?r[i](s):r[i]=n.observable(s)}):t.each(i,function(t,i){var s=e[t],o;s==null?o=l.value(i):o=s,r[t]?r[t](o):r[t]=n.observable(o)})}if(this.pageRoute){var s=this.getValue().nameParam;s&&(typeof s=="string"?this.ctx[s]?this.ctx[s](this.currentId):this.ctx[s]=n.observable(this.currentId):s(this.currentId))}},p.hidePage=function(e){var t=this;"show"!==t.val("urlToggle")?(t.hideElementWrapper(e),t.childManager.hideChild()):e&&e()};var d=function(e){try{n.applyBindingsToDescendants(e.childBindingContext,e.element)}catch(t){s(e,"onBindingError",{error:t})}};p.init=function(){var e=this,r=e.val("urlToggle"),i=e.val("id");i!=="?"&&e.getCurrentId(i);var o=n.utils.domData.get(e.element,"__ko_pagerjsBindingData");if(o)return{controlsDescendantBindings:!0};n.utils.domData.set(e.element,"__ko_pagerjsBindingData",e),n.utils.domNodeDisposal.addDisposeCallback(e.element,function(){s(e,"beforeRemove"),e.parentPage&&e.parentPage.children.remove(e),s(e,"afterRemove")});var u=e.getValue();r!=="none"&&(e.parentPage=e.getParentPage(),e.parentPage.children.push(this),e.hideElement()),e.val("source")&&e.loadSource(e.val("source")),e.ctx=null;if(u.withOnShow)e.ctx={},e.childBindingContext=e.bindingContext.createChildContext(e.ctx),n.utils.extend(e.childBindingContext,{$page:this});else{var a=u["with"]||e.bindingContext.$observableData||e.viewModel;e.ctx=l.value(a),e.augmentContext();if(n.isObservable(a)){var f=n.observable(e.ctx);e.childBindingContext=e.bindingContext.createChildContext(f),n.utils.extend(e.childBindingContext,{$page:this,$observableData:a}),d(e),a.subscribe(function(){f(l.value(a))})}else e.childBindingContext=e.bindingContext.createChildContext(e.ctx),n.utils.extend(e.childBindingContext,{$page:this,$observableData:undefined}),d(e)}if(r!=="none")e.parentPage.route&&e.parentPage.route[0]===e.getId()&&setTimeout(function(){e.parentPage.showPage(e.parentPage.route)},0);else{var c=function(){t(e.element).is(":visible")&&e.showPage([])};setTimeout(c,0),e.getParentPage().isVisible.subscribe(function(e){e&&setTimeout(c,0)})}var h=e.getValue().bind;return n.isObservable(h)&&h(e),{controlsDescendantBindings:!0}},p.augmentContext=function(){var e=this,r=e.val("params");r&&(t.isArray(r)?t.each(r,function(t,r){e.ctx[r]||(e.ctx[r]=n.observable())}):t.each(r,function(t,i){e.ctx[t]||(n.isObservable(i)?e.ctx[t]=i:i===null?(r[t]=n.observable(null),e.ctx[t]=n.observable(null)):e.ctx[t]=n.observable(i))})),this.val("vars")&&t.each(this.val("vars"),function(t,r){n.isObservable(r)?e.ctx[t]=r:e.ctx[t]=n.observable(r)});var i=this.getValue().nameParam;i&&typeof i=="string"&&(e.ctx[i]=n.observable(null)),this.setParams()},p.getValue=function(){return this.valueAccessor?l.value(this.valueAccessor()):{}},p.getParentPage=function(){return i.getParentPage(this.bindingContext)},p.getId=function(){return this.val("id")},p.id=function(){var e=this.getCurrentId();return e==null||e===""?this.getId():e},p.sourceUrl=function(e){var t=this;return this.getId()==="?"?n.computed(function(){var n;return t.val("deep")?n=[t.currentId].concat(t.route).join("/"):n=t.currentId,l.value(e).replace("{1}",n)}):n.computed(function(){return l.value(e)})},p.loadWithOnShow=function(){var e=this;if(!e.withOnShowLoaded||e.val("sourceCache")!==!0)e.withOnShowLoaded=!0,e.val("withOnShow")(function(t){var r=e.bindingContext.createChildContext(t);e.ctx=t,e.childBindingContext=r,e.augmentContext(),n.utils.extend(r,{$page:e}),d(e)},e)},p.loadSource=function(e){var r=this.getValue(),s=this,o=this.element,u=null,a=r.loader||i.loader;if(r.frame==="iframe"){var f=t("iframe",t(o));f.length===0&&(f=t("<iframe></iframe>"),t(o).append(f)),a&&(u=l.value(a)(s,f),u.load()),f.one("load",function(){u&&u.unload(),r.sourceLoaded&&r.sourceLoaded(s)}),n.applyBindingsToNode(f[0],{attr:{src:this.sourceUrl(e)}})}else{a&&(u=l.value(a)(s,s.element),u.load());var c=function(){u&&u.unload(),s.val("withOnShow")?s.val("withOnShow")&&s.loadWithOnShow():d(s),r.sourceLoaded&&r.sourceLoaded(s),s.route&&s.childManager.showChild(s.route)};if(typeof l.value(e)=="string"){var h=l.value(this.sourceUrl(e));m(o,h,function(){c()},s)}else{var p=t(o).children();l.value(e)(this,function(){t.each(p,function(e,t){n.utils.domNodeDisposal.removeNode(t)}),c()})}}};var v=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,m=function(e,r,i,o){var u,a,f,l=t(e),c=r.indexOf(" ");c>=0&&(u=r.slice(c,r.length),r=r.slice(0,c));var h=jQuery.ajax({url:r,type:"GET",dataType:"html",complete:function(e,t){i&&l.each(i,f||[e.responseText,t,e])}}).done(function(e){f=arguments,t.each(l.children(),function(e,t){n.utils.domNodeDisposal.removeNode(t)}),l.html(u?jQuery("<div>").append(e.replace(v,"")).find(u):e)});return h.fail(function(){s(o,"onSourceError",{url:r,xhrPromise:h})}),l};p.show=function(t){var n=this.element,r=this;r.showElementWrapper(t),r.val("title")&&(e.document.title=r.val("title"));if(r.val("sourceOnShow")){if(!r.val("sourceCache")||!n.__pagerLoaded__||typeof r.val("sourceCache")=="number"&&n.__pagerLoaded__+r.val("sourceCache")*1e3<i.now())n.__pagerLoaded__=i.now(),r.loadSource(r.val("sourceOnShow"))}else r.val("withOnShow")&&r.loadWithOnShow()},p.showElementWrapper=function(e){var t=this;s(t,"beforeShow"),t.showElement(e),t.val("scrollToTop")&&t.element.scrollIntoView(),s(t,"afterShow")},p.showElement=function(e){this.val("showElement")?this.val("showElement")(this,e):this.val("fx")?i.fx[this.val("fx")].showElement(this,e):i.showElement?i.showElement(this,e):t(this.element).show(e)},p.hideElementWrapper=function(e){this.isVisible(!1),s(this,"beforeHide"),this.hideElement(e),s(this,"afterHide")},p.hideElement=function(e){this.val("hideElement")?this.val("hideElement")(this,e):this.val("fx")?i.fx[this.val("fx")].hideElement(this,e):i.hideElement?i.hideElement(this,e):(t(this.element).hide(),e&&e())},p.getFullRoute=function(){return this._fullRoute?this._fullRoute:(this._fullRoute=n.computed(function(){var e=null;return this.currentParentPage&&this.currentParentPage()?(e=this.currentParentPage().getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):this.parentPage?(e=this.parentPage.getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):[]},this),this._fullRoute)},p.getRole=function(){return this.val("role")||"next"},p.nullObject=new i.Page,p.nullObject.children=n.observableArray([]),p.child=function(e){var r=this;return r._child==null&&(r._child={}),r._child[e]||(r._child[e]=n.computed(function(){var n=t.grep(this.children(),function(t){return t.id()===e})[0];return n||this.nullObject},this)),r._child[e]},n.bindingHandlers.page={init:function(e,t,n,r,s){var o=null;return l.value(t())instanceof i.Page?(o=l.value(t()),o.element=e,o.allBindingsAccessor==null&&(o.allBindingsAccessor=n),o.viewModel==null&&(o.viewModel=r),o.bindingContext==null&&(o.bindingContext=s)):o=new i.Page(e,t,n,r,s),o.init()}},i.useHTML5history=!1,i.rootURI="/",i.Href=function(e,t,r,i,s){this.element=e,this.bindingContext=s,this.path=n.observable(),this.pageOrRelativePath=n.observable(t)};var g=i.Href.prototype;return g.getParentPage=function(){return i.getParentPage(this.bindingContext)},g.init=function(){var e=this,t=e.getParentPage();e.path=n.computed(function(){var n=l.value(e.pageOrRelativePath()());return t.path(n)})},i.Href.hash="#",g.bind=function(){n.applyBindingsToNode(this.element,{attr:{href:this.path}})},g.update=function(e){this.pageOrRelativePath(e)},i.Href5=function(e,t,n,r,s){i.Href.apply(this,arguments)},i.Href5.prototype=new i.Href,i.Href5.history=e.History,i.Href5.prototype.bind=function(){var e=this;n.applyBindingsToNode(e.element,{attr:{href:e.path},click:function(){var n=e.path();if(n===""||n==="/")n=t("base").attr("href");i.Href5.history.pushState(null,null,n)}})},n.bindingHandlers["page-href"]={init:function(e,t,n,r,s){var o=i.useHTML5history?i.Href5:i.Href,u=new o(e,t,n,r,s);u.init(),u.bind(),e.__ko__page=u},update:function(e,t){e.__ko__page.update(t)}},i.fx={},i.fx.cssAsync=function(e){return{showElement:function(n,r){var i=t(n.element);i.addClass(e),i.show();var s=setInterval(function(){clearInterval(s),i.addClass(e+"-in")},10),o=setInterval(function(){clearInterval(o),r&&r()},300)},hideElement:function(n,r){var i=t(n.element);if(!n.pageHiddenOnce)n.pageHiddenOnce=!0,i.hide();else{i.removeClass(e+"-in");var s=setInterval(function(){clearInterval(s),r&&r(),i.hide()},300)}}}},i.fx.zoom=i.fx.cssAsync("pagerjs-fx-zoom"),i.fx.flip=i.fx.cssAsync("pagerjs-fx-flip"),i.fx.popout=i.fx.cssAsync("pagerjs-fx-popout-modal"),i.fx.jQuerySync=function(e,n){return{showElement:function(n,r){e.call(t(n.element),300,r)},hideElement:function(e,r){n.call(t(e.element),300,function(){t(e.element).hide()}),r&&r()}}},i.fx.slide=i.fx.jQuerySync(t.fn.slideDown,t.fn.slideUp),i.fx.fade=i.fx.jQuerySync(t.fn.fadeIn,t.fn.fadeOut),i.startHistoryJs=function(t){var n=typeof t=="string"?t:null;n&&i.Href5.history.pushState(null,null,n),i.Href5.history.Adapter.bind(e,"statechange",function(){var e=i.Href5.history.getState().url.replace(i.Href5.history.getBaseUrl(),"");a(e)}),i.Href5.history.Adapter.bind(e,"anchorchange",function(){a(location.hash)}),(!t||!t.noGo)&&a(History.getState().url.replace(History.getBaseUrl(),""))},i.startHashChange=function(n){var r=typeof n=="string"?n:null;r&&(e.location.hash=i.Href.hash+r),t(e).hashchange(function(){a(e.location.hash)}),(!n||!n.noGo)&&t(e).hashchange()},i.start=function(n){var r=typeof n=="string"?n:null;r&&(e.location.hash=i.Href.hash+r);var s=function(){a(e.location.hash)};t(e).bind("hashchange",s),(!n||!n.noGo)&&s()},i},n=e.define;typeof n=="function"&&typeof n.amd=="object"&&n.amd?n(["knockout","jquery"],function(e){return t($,e)}):e.pager=t($,ko)})(window);
View
144 pager.js
@@ -49,25 +49,24 @@
pager.page = page;
};
- /**
- * Called when a route does not find a match.
- *
- * @var navigationFailed
- * @type {Observable}
- * @static
- */
- pager.navigationFailed = ko.observable();
-
- /**
- * Called when a binding could not be applied.
- *
- * @var onBindingError
- * @type {$.Callbacks}
- * @static
- */
- pager.onBindingError = $.Callbacks();
+ var fire = function(scope, name, options) {
+ options = options || {};
+ options.page = scope;
+ // first fire the global method
+ pager[name].fire(options);
+ // then call the local callback
+ if(scope.val(name)) {
+ scope.val(name)(options);
+ }
+ };
- pager.onSourceError = $.Callbacks();
+ // Add 9 callbacks on pager
+ $.each(['onBindingError', 'onSourceError','onNoMatch',
+ 'beforeRemove', 'afterRemove',
+ 'beforeHide', 'afterHide',
+ 'beforeShow','afterShow'], function(i,n) {
+ pager[n] = $.Callbacks();
+ });
/**
*
@@ -120,6 +119,7 @@
// trigger navigation
pager.showChild(hashRoute);
};
+ pager.goTo = goTo;
/**
*
@@ -287,12 +287,7 @@
}
var onFailed = function () {
- if (pager.navigationFailed) {
- pager.navigationFailed({page:me.page, route:route});
- }
- if (me.page.getValue().navigationFailed) {
- _ko.value(me.page.getValue().navigationFailed)(me.page, route);
- }
+ fire(me.page, 'onNoMatch', {route:route});
};
var showCurrentChild = function () {
@@ -347,7 +342,7 @@
* @param {Function} valueAccessor.hideElement
* @param {Function} valueAccessor.showElement
* @param {Function} valueAccessor.loader
- * @param {Function} valueAccessor.navigationFailed
+ * @param {Function} valueAccessor.onNoMatch
* @param {Function} valueAccessor.guard
* @param {Object} valueAccessor.params
* @param {Object} valueAccessor.vars
@@ -686,14 +681,7 @@
try {
ko.applyBindingsToDescendants(page.childBindingContext, page.element);
} catch (e) {
- var onBindingError = page.val('onBindingError');
- if (onBindingError) {
- onBindingError(page.e);
- }
- pager.onBindingError.fire({
- page:page,
- error:e
- });
+ fire(page, 'onBindingError', {error:e});
}
};
@@ -721,21 +709,11 @@
// listen to when the element is removed
ko.utils.domNodeDisposal.addDisposeCallback(m.element, function () {
// then remove this Page-instance
- var beforeRemove = m.val('beforeRemove');
- if (beforeRemove) {
- beforeRemove({
- page:m
- });
- }
+ fire(m, 'beforeRemove');
if (m.parentPage) {
m.parentPage.children.remove(m);
}
- var afterRemove = m.val('afterRemove');
- if (afterRemove) {
- afterRemove({
- page:m
- });
- }
+ fire(m, 'afterRemove');
});
var value = m.getValue();
@@ -1069,10 +1047,7 @@
});
loadPromise.fail(function () {
- if (page.val('onSourceError')) {
- page.val('onSourceError')({url:url, page:page, xhrPromise:loadPromise});
- }
- pager.onSourceError.fire({url:url, page:page, xhrPromise:loadPromise});
+ fire(page, 'onSourceError', {url:url, xhrPromise:loadPromise});
});
return self;
};
@@ -1111,16 +1086,12 @@
*/
p.showElementWrapper = function (callback) {
var me = this;
- if (me.val('beforeShow')) {
- me.val('beforeShow')(this);
- }
+ fire(me, 'beforeShow');
me.showElement(callback);
if (me.val('scrollToTop')) {
me.element.scrollIntoView();
}
- if (me.val('afterShow')) {
- me.val('afterShow')(this);
- }
+ fire(me, 'afterShow');
};
/**
@@ -1146,13 +1117,9 @@
*/
p.hideElementWrapper = function (callback) {
this.isVisible(false);
- if (this.val('beforeHide')) {
- this.val('beforeHide')(this);
- }
+ fire(this, 'beforeHide');
this.hideElement(callback);
- if (this.val('afterHide')) {
- this.val('afterHide')(this);
- }
+ fire(this, 'afterHide');
};
/**
@@ -1347,30 +1314,6 @@
});
};
- ko.bindingHandlers['page-hash'] = {
- init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
- var href = new pager.Href(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
- href.init();
- href.bind();
- element.__ko__page = href;
- },
- update:function (element, valueAccessor) {
- element.__ko__page.update(valueAccessor);
- }
- };
-
- ko.bindingHandlers['page-href5'] = {
- init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
- var href = new pager.Href5(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
- href.init();
- href.bind();
- element.__ko__page = href;
- },
- update:function (element, valueAccessor) {
- element.__ko__page.update(valueAccessor);
- }
- };
-
ko.bindingHandlers['page-href'] = {
init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var Cls = pager.useHTML5history ? pager.Href5 : pager.Href;
@@ -1445,7 +1388,12 @@
pager.fx.slide = pager.fx.jQuerySync($.fn.slideDown, $.fn.slideUp);
pager.fx.fade = pager.fx.jQuerySync($.fn.fadeIn, $.fn.fadeOut);
- pager.startHistoryJs = function (id) {
+ /**
+ *
+ * @param {String/Object} options
+ */
+ pager.startHistoryJs = function (options) {
+ var id = typeof options === 'string' ? options : null;
if (id) {
pager.Href5.history.pushState(null, null, id);
}
@@ -1458,18 +1406,26 @@
pager.Href5.history.Adapter.bind(window, 'anchorchange', function () {
goTo(location.hash);
});
-
- goTo(pager.Href5.history.getState().url.replace(pager.Href5.history.getBaseUrl(), ''));
+ if(!options || !options.noGo) {
+ goTo(History.getState().url.replace(History.getBaseUrl(), ''));
+ }
};
- pager.startHashChange = function (id) {
+ /**
+ *
+ * @param {String/Object} options
+ */
+ pager.startHashChange = function (options) {
+ var id = typeof options === 'string' ? options : null;
if (id) {
window.location.hash = pager.Href.hash + id;
}
$(window).hashchange(function () {
goTo(window.location.hash);
});
- $(window).hashchange();
+ if(!options || !options.noGo) {
+ $(window).hashchange();
+ }
};
/**
@@ -1479,9 +1435,11 @@
* do not want IE6/7 support.
*
* @method start
+ * @param {String/Object} options
* @static
*/
- pager.start = function (id) {
+ pager.start = function (options) {
+ var id = typeof options === 'string' ? options : null;
if (id) {
window.location.hash = pager.Href.hash + id;
}
@@ -1490,7 +1448,9 @@
};
$(window).bind('hashchange', onHashChange);
- onHashChange();
+ if(!options || !options.noGo) {
+ onHashChange();
+ }
};
return pager;
};
View
4 pagerjs.com/demo/pager.min.js
@@ -1,4 +1,4 @@
-/*! pager.js - v0.7.0 - 2013-02-20
+/*! pager.js - v0.7.0 - 2013-03-23
* http://oscar.finnsson.nu/pagerjs/
* Copyright (c) 2013 Oscar Finnsson; Licensed MIT */
-(function(e){var t=e.History,n=function(n,r){"use strict";var i=function(e,t){return function(){var n=arguments;return r.computed(function(){return e.apply(t,n)})}},s={};s.page=null,s.now=function(){return Date.now?Date.now():(new Date).valueOf()},s.extendWithPage=function(e){var t=new s.Page;e.$__page__=t,s.page=t},s.navigationFailed=r.observable(),s.onBindingError=n.Callbacks(),s.onSourceError=n.Callbacks(),s.showChild=function(e){var t=e&&e.length===1&&e[0]===""?[]:e;s.page.showPage(t)},s.getParentPage=function(e){while(e){if(e.$page&&e.$page.val("urlToggle")!=="none")return e.$page;if(e.$data&&e.$data.$__page__)return e.$data.$__page__;e=e.$parentContext}return null};var o=null,u=null,a=function(e){u&&u.reject({cancel:!0}),o=null,e.substring(0,s.Href.hash.length)===s.Href.hash&&(e=e.slice(s.Href.hash.length));var t=f(e);s.showChild(t)};s.navigate=function(e){s.useHTML5history?s.Href5.history.pushState(null,null,e):location.hash=e};var f=function(e){return n.map(e.replace(/\+/g," ").split("/"),decodeURIComponent)},l={};l.value=r.utils.unwrapObservable,l.arrayValue=function(e){return n.map(e,function(e){return l.value(e)})};var c=function(e){var t,n={},r=/([^&=]+)=?([^&]*)/g;while(t=r.exec(e))n[t[1]]=t[2];return n},h=function(e){if(!e)return{name:null,params:{}};var t=e.split("?"),n=t[0],r=t[1],i={};return r&&(i=c(r)),{name:n,params:i}};s.ChildManager=function(e,t){this.currentChildO=r.observable(null);var i=this;this.page=t,this.timeStamp=s.now(),this.hideChild=function(){i.currentChild&&i.currentChild.getId()!=="start"&&(i.currentChild.hidePage(function(){}),i.currentChild=null,i.currentChildO(null))},this.showChild=function(t){var r=t.length===0;this.timeStamp=s.now();var o=this.timeStamp,u=i.currentChild;i.currentChild=null;var a=!1,f=h(t[0]),c=f.name,p=null;n.each(e(),function(e,t){if(!a){var n=t.getId(),r=t.getRole();if(n===c||(c===""||c==null)&&(n==="start"||r==="start"))a=!0,i.currentChild=t;n==="?"&&(p=t)}});var d=!1,v=i,m=function(e,t){if(!a){var n=t.getId(),r=t.getValue().modal;if(r){if(n===c||(c===""||c==null)&&n==="start")a=!0,i.currentChild=t,d=!0;n==="?"&&!p&&(p=t,d=!0)}}};while(!i.currentChild&&v.page.parentPage&&!v.page.getValue().modal){var g=v.page.parentPage.children;n.each(g(),m),i.currentChild||(v=v.page.parentPage.childManager)}!i.currentChild&&p&&!r&&(i.currentChild=p),i.currentChild&&(i.currentChildO(i.currentChild),d?i.currentChild.currentParentPage(i.page):i.currentChild.currentParentPage(null));var y=function(){s.navigationFailed&&s.navigationFailed({page:i.page,route:t}),i.page.getValue().navigationFailed&&l.value(i.page.getValue().navigationFailed)(i.page,t)},b=function(){var e=l.value(i.currentChild.getValue().guard);e?e(i.currentChild,t,function(){i.timeStamp===o&&i.currentChild.showPage(t.slice(1),f,t[0])},u):i.currentChild.showPage(t.slice(1),f,t[0])};u&&u===i.currentChild?b():u?u.hidePage(function(){i.currentChild?b():y()}):i.currentChild?b():y()}},s.Page=function(e,t,n,i,o){this.element=e,this.valueAccessor=t,this.allBindingsAccessor=n,this.viewModel=i,this.bindingContext=o,this.children=r.observableArray([]),this.childManager=new s.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.getCurrentId=r.observable(),this.ctx=null,this.currentParentPage=r.observable(null),this.isVisible=r.observable(!1),this.originalRoute=r.observable(null),this.route=null};var p=s.Page.prototype;p.val=function(e){return l.value(this.getValue()[e])},p.currentChildPage=function(){return this.childManager.currentChildO},p.find=function(e){var t=l.value(e),r=this;if(t.substring(0,1)==="/")r=s.page,t=t.slice(1);else while(t.substring(0,3)==="../")r=r.currentParentPage&&r.currentParentPage()?r.currentParentPage():r.parentPage,t=t.slice(3);var i=f(t);return n.each(i,function(e,t){r=r.child(t)()}),r},p.find$=function(e){return i(this.find,this)(e)},p.path=function(e){var t=this,r=l.value(e);if(r&&typeof r=="object"&&r.path&&r.params&&!(r instanceof s.Page)){var i=r.path,o=r.params;return t.path(i)+"?"+n.param(o)}var u;if(r==null||r==="")u=t;else{if(!(r instanceof s.Page)){if(r.substring(0,1)==="/")return s.page.getFullRoute()()+r.substring(1);var a=0;while(r.substring(0,3)==="../")a++,r=r.slice(3);var f=t.getFullRoute()(),c=f.slice(0,f.length-a).join("/"),h=(c===""?"":c+"/")+r;return s.useHTML5history?n("base").attr("href")+h:s.Href.hash+h}u=r}var p=u.getFullRoute()().join("/");return s.useHTML5history?n("base").attr("href")+p:s.Href.hash+p},p.path$=function(e){return i(this.path,this)(e)},p.async=function(e,t,n,r){var i=this;return function(){u&&u.reject({cancel:!0});var a=e();u=a,r&&r(a.state());var f=Math.random();o=f,a.done(function(){r&&r(a.state()),f===o&&s.navigate(i.path(t))}),a.fail(function(e){r&&r(a.state());var t=e&&e.cancel;f===o&&!t&&n&&s.navigate(i.path(n))})}},p.showPage=function(e,t,n){var r=this,i=r.currentId,s=r.pageRoute?r.pageRoute.params:null,o=r.isVisible();r.currentId=t?t.name||"":"",r.getCurrentId(r.currentId),r.isVisible(!0),n&&r.originalRoute(n),r.route=e,r.pageRoute=t,o?(r.getId()==="?"&&i!==r.currentId&&r.show(),t&&s!==t.params&&r.setParams()):(r.setParams(),r.show()),r.childManager.showChild(e)},p.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var e=this.pageRoute.params,t=this.ctx,i=this.val("params")||{};n.isArray(i)?n.each(i,function(n,i){var s=e[i];t[i]?t[i](s):t[i]=r.observable(s)}):n.each(i,function(n,i){var s=e[n],o;s==null?o=l.value(i):o=s,t[n]?t[n](o):t[n]=r.observable(o)})}if(this.pageRoute){var s=this.getValue().nameParam;s&&(typeof s=="string"?this.ctx[s]?this.ctx[s](this.currentId):this.ctx[s]=r.observable(this.currentId):s(this.currentId))}},p.hidePage=function(e){var t=this;"show"!==t.val("urlToggle")?(t.hideElementWrapper(e),t.childManager.hideChild()):e&&e()};var d=function(e){try{r.applyBindingsToDescendants(e.childBindingContext,e.element)}catch(t){var n=e.val("onBindingError");n&&n(e.e),s.onBindingError.fire({page:e,error:t})}};p.init=function(){var e=this,t=e.val("urlToggle"),i=e.val("id");i!=="?"&&e.getCurrentId(i);var s=r.utils.domData.get(e.element,"__ko_pagerjsBindingData");if(s)return{controlsDescendantBindings:!0};r.utils.domData.set(e.element,"__ko_pagerjsBindingData",e),r.utils.domNodeDisposal.addDisposeCallback(e.element,function(){var t=e.val("beforeRemove");t&&t({page:e}),e.parentPage&&e.parentPage.children.remove(e);var n=e.val("afterRemove");n&&n({page:e})});var o=e.getValue();t!=="none"&&(e.parentPage=e.getParentPage(),e.parentPage.children.push(this),e.hideElement()),e.val("source")&&e.loadSource(e.val("source")),e.ctx=null;if(o.withOnShow)e.ctx={},e.childBindingContext=e.bindingContext.createChildContext(e.ctx),r.utils.extend(e.childBindingContext,{$page:this});else{var u=o["with"]||e.bindingContext.$observableData||e.viewModel;e.ctx=l.value(u),e.augmentContext();if(r.isObservable(u)){var a=r.observable(e.ctx);e.childBindingContext=e.bindingContext.createChildContext(a),r.utils.extend(e.childBindingContext,{$page:this,$observableData:u}),d(e),u.subscribe(function(){a(l.value(u))})}else e.childBindingContext=e.bindingContext.createChildContext(e.ctx),r.utils.extend(e.childBindingContext,{$page:this,$observableData:undefined}),d(e)}if(t!=="none")e.parentPage.route&&e.parentPage.route[0]===e.getId()&&setTimeout(function(){e.parentPage.showPage(e.parentPage.route)},0);else{var f=function(){n(e.element).is(":visible")&&e.showPage([])};setTimeout(f,0),e.getParentPage().isVisible.subscribe(function(e){e&&setTimeout(f,0)})}var c=e.getValue().bind;return r.isObservable(c)&&c(e),{controlsDescendantBindings:!0}},p.augmentContext=function(){var e=this,t=e.val("params");t&&(n.isArray(t)?n.each(t,function(t,n){e.ctx[n]||(e.ctx[n]=r.observable())}):n.each(t,function(n,i){e.ctx[n]||(r.isObservable(i)?e.ctx[n]=i:i===null?(t[n]=r.observable(null),e.ctx[n]=r.observable(null)):e.ctx[n]=r.observable(i))})),this.val("vars")&&n.each(this.val("vars"),function(t,n){r.isObservable(n)?e.ctx[t]=n:e.ctx[t]=r.observable(n)});var i=this.getValue().nameParam;i&&typeof i=="string"&&(e.ctx[i]=r.observable(null)),this.setParams()},p.getValue=function(){return this.valueAccessor?l.value(this.valueAccessor()):{}},p.getParentPage=function(){return s.getParentPage(this.bindingContext)},p.getId=function(){return this.val("id")},p.id=function(){var e=this.getCurrentId();return e==null||e===""?this.getId():e},p.sourceUrl=function(e){var t=this;return this.getId()==="?"?r.computed(function(){var n;return t.val("deep")?n=[t.currentId].concat(t.route).join("/"):n=t.currentId,l.value(e).replace("{1}",n)}):r.computed(function(){return l.value(e)})},p.loadWithOnShow=function(){var e=this;if(!e.withOnShowLoaded||e.val("sourceCache")!==!0)e.withOnShowLoaded=!0,e.val("withOnShow")(function(t){var n=e.bindingContext.createChildContext(t);e.ctx=t,e.childBindingContext=n,e.augmentContext(),r.utils.extend(n,{$page:e}),d(e)},e)},p.loadSource=function(e){var t=this.getValue(),i=this,o=this.element,u=null,a=t.loader||s.loader;if(t.frame==="iframe"){var f=n("iframe",n(o));f.length===0&&(f=n("<iframe></iframe>"),n(o).append(f)),a&&(u=l.value(a)(i,f),u.load()),f.one("load",function(){u&&u.unload(),t.sourceLoaded&&t.sourceLoaded(i)}),r.applyBindingsToNode(f[0],{attr:{src:this.sourceUrl(e)}})}else{a&&(u=l.value(a)(i,i.element),u.load());var c=function(){u&&u.unload(),i.val("withOnShow")?i.val("withOnShow")&&i.loadWithOnShow():d(i),t.sourceLoaded&&t.sourceLoaded(i),i.route&&i.childManager.showChild(i.route)};if(typeof l.value(e)=="string"){var h=l.value(this.sourceUrl(e));m(o,h,function(){c()},i)}else{var p=n(o).children();l.value(e)(this,function(){n.each(p,function(e,t){r.utils.domNodeDisposal.removeNode(t)}),c()})}}};var v=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,m=function(e,t,i,o){var u,a,f,l=n(e),c=t.indexOf(" ");c>=0&&(u=t.slice(c,t.length),t=t.slice(0,c));var h=jQuery.ajax({url:t,type:"GET",dataType:"html",complete:function(e,t){i&&l.each(i,f||[e.responseText,t,e])}}).done(function(e){f=arguments,n.each(l.children(),function(e,t){r.utils.domNodeDisposal.removeNode(t)}),l.html(u?jQuery("<div>").append(e.replace(v,"")).find(u):e)});return h.fail(function(){o.val("onSourceError")&&o.val("onSourceError")({url:t,page:o,xhrPromise:h}),s.onSourceError.fire({url:t,page:o,xhrPromise:h})}),l};p.show=function(t){var n=this.element,r=this;r.showElementWrapper(t),r.val("title")&&(e.document.title=r.val("title"));if(r.val("sourceOnShow")){if(!r.val("sourceCache")||!n.__pagerLoaded__||typeof r.val("sourceCache")=="number"&&n.__pagerLoaded__+r.val("sourceCache")*1e3<s.now())n.__pagerLoaded__=s.now(),r.loadSource(r.val("sourceOnShow"))}else r.val("withOnShow")&&r.loadWithOnShow()},p.showElementWrapper=function(e){var t=this;t.val("beforeShow")&&t.val("beforeShow")(this),t.showElement(e),t.val("scrollToTop")&&t.element.scrollIntoView(),t.val("afterShow")&&t.val("afterShow")(this)},p.showElement=function(e){this.val("showElement")?this.val("showElement")(this,e):this.val("fx")?s.fx[this.val("fx")].showElement(this,e):s.showElement?s.showElement(this,e):n(this.element).show(e)},p.hideElementWrapper=function(e){this.isVisible(!1),this.val("beforeHide")&&this.val("beforeHide")(this),this.hideElement(e),this.val("afterHide")&&this.val("afterHide")(this)},p.hideElement=function(e){this.val("hideElement")?this.val("hideElement")(this,e):this.val("fx")?s.fx[this.val("fx")].hideElement(this,e):s.hideElement?s.hideElement(this,e):(n(this.element).hide(),e&&e())},p.getFullRoute=function(){return this._fullRoute?this._fullRoute:(this._fullRoute=r.computed(function(){var e=null;return this.currentParentPage&&this.currentParentPage()?(e=this.currentParentPage().getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):this.parentPage?(e=this.parentPage.getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):[]},this),this._fullRoute)},p.getRole=function(){return this.val("role")||"next"},p.nullObject=new s.Page,p.nullObject.children=r.observableArray([]),p.child=function(e){var t=this;return t._child==null&&(t._child={}),t._child[e]||(t._child[e]=r.computed(function(){var t=n.grep(this.children(),function(t){return t.id()===e})[0];return t||this.nullObject},this)),t._child[e]},r.bindingHandlers.page={init:function(e,t,n,r,i){var o=null;return l.value(t())instanceof s.Page?(o=l.value(t()),o.element=e,o.allBindingsAccessor==null&&(o.allBindingsAccessor=n),o.viewModel==null&&(o.viewModel=r),o.bindingContext==null&&(o.bindingContext=i)):o=new s.Page(e,t,n,r,i),o.init()}},s.useHTML5history=!1,s.rootURI="/",s.Href=function(e,t,n,i,s){this.element=e,this.bindingContext=s,this.path=r.observable(),this.pageOrRelativePath=r.observable(t)};var g=s.Href.prototype;return g.getParentPage=function(){return s.getParentPage(this.bindingContext)},g.init=function(){var e=this,t=e.getParentPage();e.path=r.computed(function(){var n=l.value(e.pageOrRelativePath()());return t.path(n)})},s.Href.hash="#",g.bind=function(){r.applyBindingsToNode(this.element,{attr:{href:this.path}})},g.update=function(e){this.pageOrRelativePath(e)},s.Href5=function(e,t,n,r,i){s.Href.apply(this,arguments)},s.Href5.prototype=new s.Href,s.Href5.history=e.history,s.Href5.prototype.bind=function(){var e=this;r.applyBindingsToNode(e.element,{attr:{href:e.path},click:function(){var t=e.path();if(t===""||t==="/")t=n("base").attr("href");s.Href5.history.pushState(null,null,t)}})},r.bindingHandlers["page-hash"]={init:function(e,t,n,r,i){var o=new s.Href(e,t,n,r,i);o.init(),o.bind(),e.__ko__page=o},update:function(e,t){e.__ko__page.update(t)}},r.bindingHandlers["page-href5"]={init:function(e,t,n,r,i){var o=new s.Href5(e,t,n,r,i);o.init(),o.bind(),e.__ko__page=o},update:function(e,t){e.__ko__page.update(t)}},r.bindingHandlers["page-href"]={init:function(e,t,n,r,i){var o=s.useHTML5history?s.Href5:s.Href,u=new o(e,t,n,r,i);u.init(),u.bind(),e.__ko__page=u},update:function(e,t){e.__ko__page.update(t)}},s.fx={},s.fx.cssAsync=function(e){return{showElement:function(t,r){var i=n(t.element);i.addClass(e),i.show();var s=setInterval(function(){clearInterval(s),i.addClass(e+"-in")},10),o=setInterval(function(){clearInterval(o),r&&r()},300)},hideElement:function(t,r){var i=n(t.element);if(!t.pageHiddenOnce)t.pageHiddenOnce=!0,i.hide();else{i.removeClass(e+"-in");var s=setInterval(function(){clearInterval(s),r&&r(),i.hide()},300)}}}},s.fx.zoom=s.fx.cssAsync("pagerjs-fx-zoom"),s.fx.flip=s.fx.cssAsync("pagerjs-fx-flip"),s.fx.popout=s.fx.cssAsync("pagerjs-fx-popout-modal"),s.fx.jQuerySync=function(e,t){return{showElement:function(t,r){e.call(n(t.element),300,r)},hideElement:function(e,r){t.call(n(e.element),300,function(){n(e.element).hide()}),r&&r()}}},s.fx.slide=s.fx.jQuerySync(n.fn.slideDown,n.fn.slideUp),s.fx.fade=s.fx.jQuerySync(n.fn.fadeIn,n.fn.fadeOut),s.startHistoryJs=function(r){r&&s.Href5.history.pushState(null,null,r),t.Adapter.bind(e,"statechange",function(){var e=n("base").attr("href"),r=t.getState().url.replace(e,"");a(r)}),t.Adapter.bind(e,"anchorchange",function(){a(location.hash)}),a(t.getState().url.replace(t.getRootUrl(),""))},s.startHashChange=function(t){t&&(e.location.hash=s.Href.hash+t),n(e).hashchange(function(){a(e.location.hash)}),n(e).hashchange()},s.start=function(t){t&&(e.location.hash=s.Href.hash+t);var r=function(){a(e.location.hash)};n(e).bind("hashchange",r),r()},s},r=e.define;typeof r=="function"&&typeof r.amd=="object"&&r.amd?r(["knockout","jquery"],function(e){return n($,e)}):e.pager=n($,ko)})(window);
+(function(e){var t=function(t,n){"use strict";var r=function(e,t){return function(){var r=arguments;return n.computed(function(){return e.apply(t,r)})}},i={};i.page=null,i.now=function(){return Date.now?Date.now():(new Date).valueOf()},i.extendWithPage=function(e){var t=new i.Page;e.$__page__=t,i.page=t};var s=function(e,t,n){n=n||{},n.page=e,i[t].fire(n),e.val(t)&&e.val(t)(n)};t.each(["onBindingError","onSourceError","onNoMatch","beforeRemove","afterRemove","beforeHide","afterHide","beforeShow","afterShow"],function(e,n){i[n]=t.Callbacks()}),i.showChild=function(e){var t=e&&e.length===1&&e[0]===""?[]:e;i.page.showPage(t)},i.getParentPage=function(e){while(e){if(e.$page&&e.$page.val("urlToggle")!=="none")return e.$page;if(e.$data&&e.$data.$__page__)return e.$data.$__page__;e=e.$parentContext}return null};var o=null,u=null,a=function(e){u&&u.reject({cancel:!0}),o=null,e.substring(0,i.Href.hash.length)===i.Href.hash&&(e=e.slice(i.Href.hash.length));var t=f(e);i.showChild(t)};i.goTo=a,i.navigate=function(e){i.useHTML5history?i.Href5.history.pushState(null,null,e):location.hash=e};var f=function(e){return t.map(e.replace(/\+/g," ").split("/"),decodeURIComponent)},l={};l.value=n.utils.unwrapObservable,l.arrayValue=function(e){return t.map(e,function(e){return l.value(e)})};var c=function(e){var t,n={},r=/([^&=]+)=?([^&]*)/g;while(t=r.exec(e))n[t[1]]=t[2];return n},h=function(e){if(!e)return{name:null,params:{}};var t=e.split("?"),n=t[0],r=t[1],i={};return r&&(i=c(r)),{name:n,params:i}};i.ChildManager=function(e,r){this.currentChildO=n.observable(null);var o=this;this.page=r,this.timeStamp=i.now(),this.hideChild=function(){o.currentChild&&o.currentChild.getId()!=="start"&&(o.currentChild.hidePage(function(){}),o.currentChild=null,o.currentChildO(null))},this.showChild=function(n){var r=n.length===0;this.timeStamp=i.now();var u=this.timeStamp,a=o.currentChild;o.currentChild=null;var f=!1,c=h(n[0]),p=c.name,d=null;t.each(e(),function(e,t){if(!f){var n=t.getId(),r=t.getRole();if(n===p||(p===""||p==null)&&(n==="start"||r==="start"))f=!0,o.currentChild=t;n==="?"&&(d=t)}});var v=!1,m=o,g=function(e,t){if(!f){var n=t.getId(),r=t.getValue().modal;if(r){if(n===p||(p===""||p==null)&&n==="start")f=!0,o.currentChild=t,v=!0;n==="?"&&!d&&(d=t,v=!0)}}};while(!o.currentChild&&m.page.parentPage&&!m.page.getValue().modal){var y=m.page.parentPage.children;t.each(y(),g),o.currentChild||(m=m.page.parentPage.childManager)}!o.currentChild&&d&&!r&&(o.currentChild=d),o.currentChild&&(o.currentChildO(o.currentChild),v?o.currentChild.currentParentPage(o.page):o.currentChild.currentParentPage(null));var b=function(){s(o.page,"onNoMatch",{route:n})},w=function(){var e=l.value(o.currentChild.getValue().guard);e?e(o.currentChild,n,function(){o.timeStamp===u&&o.currentChild.showPage(n.slice(1),c,n[0])},a):o.currentChild.showPage(n.slice(1),c,n[0])};a&&a===o.currentChild?w():a?a.hidePage(function(){o.currentChild?w():b()}):o.currentChild?w():b()}},i.Page=function(e,t,r,s,o){this.element=e,this.valueAccessor=t,this.allBindingsAccessor=r,this.viewModel=s,this.bindingContext=o,this.children=n.observableArray([]),this.childManager=new i.ChildManager(this.children,this),this.parentPage=null,this.currentId=null,this.getCurrentId=n.observable(),this.ctx=null,this.currentParentPage=n.observable(null),this.isVisible=n.observable(!1),this.originalRoute=n.observable(null),this.route=null};var p=i.Page.prototype;p.val=function(e){return l.value(this.getValue()[e])},p.currentChildPage=function(){return this.childManager.currentChildO},p.find=function(e){var n=l.value(e),r=this;if(n.substring(0,1)==="/")r=i.page,n=n.slice(1);else while(n.substring(0,3)==="../")r=r.currentParentPage&&r.currentParentPage()?r.currentParentPage():r.parentPage,n=n.slice(3);var s=f(n);return t.each(s,function(e,t){r=r.child(t)()}),r},p.find$=function(e){return r(this.find,this)(e)},p.path=function(e){var n=this,r=l.value(e);if(r&&typeof r=="object"&&r.path&&r.params&&!(r instanceof i.Page)){var s=r.path,o=r.params;return n.path(s)+"?"+t.param(o)}var u;if(r==null||r==="")u=n;else{if(!(r instanceof i.Page)){if(r.substring(0,1)==="/")return i.page.getFullRoute()()+r.substring(1);var a=0;while(r.substring(0,3)==="../")a++,r=r.slice(3);var f=n.getFullRoute()(),c=f.slice(0,f.length-a).join("/"),h=(c===""?"":c+"/")+r;return i.useHTML5history?t("base").attr("href")+h:i.Href.hash+h}u=r}var p=u.getFullRoute()().join("/");return i.useHTML5history?t("base").attr("href")+p:i.Href.hash+p},p.path$=function(e){return r(this.path,this)(e)},p.async=function(e,t,n,r){var s=this;return function(){u&&u.reject({cancel:!0});var a=e();u=a,r&&r(a.state());var f=Math.random();o=f,a.done(function(){r&&r(a.state()),f===o&&i.navigate(s.path(t))}),a.fail(function(e){r&&r(a.state());var t=e&&e.cancel;f===o&&!t&&n&&i.navigate(s.path(n))})}},p.showPage=function(e,t,n){var r=this,i=r.currentId,s=r.pageRoute?r.pageRoute.params:null,o=r.isVisible();r.currentId=t?t.name||"":"",r.getCurrentId(r.currentId),r.isVisible(!0),n&&r.originalRoute(n),r.route=e,r.pageRoute=t,o?(r.getId()==="?"&&i!==r.currentId&&r.show(),t&&s!==t.params&&r.setParams()):(r.setParams(),r.show()),r.childManager.showChild(e)},p.setParams=function(){if(this.pageRoute&&this.pageRoute.params){var e=this.pageRoute.params,r=this.ctx,i=this.val("params")||{};t.isArray(i)?t.each(i,function(t,i){var s=e[i];r[i]?r[i](s):r[i]=n.observable(s)}):t.each(i,function(t,i){var s=e[t],o;s==null?o=l.value(i):o=s,r[t]?r[t](o):r[t]=n.observable(o)})}if(this.pageRoute){var s=this.getValue().nameParam;s&&(typeof s=="string"?this.ctx[s]?this.ctx[s](this.currentId):this.ctx[s]=n.observable(this.currentId):s(this.currentId))}},p.hidePage=function(e){var t=this;"show"!==t.val("urlToggle")?(t.hideElementWrapper(e),t.childManager.hideChild()):e&&e()};var d=function(e){try{n.applyBindingsToDescendants(e.childBindingContext,e.element)}catch(t){s(e,"onBindingError",{error:t})}};p.init=function(){var e=this,r=e.val("urlToggle"),i=e.val("id");i!=="?"&&e.getCurrentId(i);var o=n.utils.domData.get(e.element,"__ko_pagerjsBindingData");if(o)return{controlsDescendantBindings:!0};n.utils.domData.set(e.element,"__ko_pagerjsBindingData",e),n.utils.domNodeDisposal.addDisposeCallback(e.element,function(){s(e,"beforeRemove"),e.parentPage&&e.parentPage.children.remove(e),s(e,"afterRemove")});var u=e.getValue();r!=="none"&&(e.parentPage=e.getParentPage(),e.parentPage.children.push(this),e.hideElement()),e.val("source")&&e.loadSource(e.val("source")),e.ctx=null;if(u.withOnShow)e.ctx={},e.childBindingContext=e.bindingContext.createChildContext(e.ctx),n.utils.extend(e.childBindingContext,{$page:this});else{var a=u["with"]||e.bindingContext.$observableData||e.viewModel;e.ctx=l.value(a),e.augmentContext();if(n.isObservable(a)){var f=n.observable(e.ctx);e.childBindingContext=e.bindingContext.createChildContext(f),n.utils.extend(e.childBindingContext,{$page:this,$observableData:a}),d(e),a.subscribe(function(){f(l.value(a))})}else e.childBindingContext=e.bindingContext.createChildContext(e.ctx),n.utils.extend(e.childBindingContext,{$page:this,$observableData:undefined}),d(e)}if(r!=="none")e.parentPage.route&&e.parentPage.route[0]===e.getId()&&setTimeout(function(){e.parentPage.showPage(e.parentPage.route)},0);else{var c=function(){t(e.element).is(":visible")&&e.showPage([])};setTimeout(c,0),e.getParentPage().isVisible.subscribe(function(e){e&&setTimeout(c,0)})}var h=e.getValue().bind;return n.isObservable(h)&&h(e),{controlsDescendantBindings:!0}},p.augmentContext=function(){var e=this,r=e.val("params");r&&(t.isArray(r)?t.each(r,function(t,r){e.ctx[r]||(e.ctx[r]=n.observable())}):t.each(r,function(t,i){e.ctx[t]||(n.isObservable(i)?e.ctx[t]=i:i===null?(r[t]=n.observable(null),e.ctx[t]=n.observable(null)):e.ctx[t]=n.observable(i))})),this.val("vars")&&t.each(this.val("vars"),function(t,r){n.isObservable(r)?e.ctx[t]=r:e.ctx[t]=n.observable(r)});var i=this.getValue().nameParam;i&&typeof i=="string"&&(e.ctx[i]=n.observable(null)),this.setParams()},p.getValue=function(){return this.valueAccessor?l.value(this.valueAccessor()):{}},p.getParentPage=function(){return i.getParentPage(this.bindingContext)},p.getId=function(){return this.val("id")},p.id=function(){var e=this.getCurrentId();return e==null||e===""?this.getId():e},p.sourceUrl=function(e){var t=this;return this.getId()==="?"?n.computed(function(){var n;return t.val("deep")?n=[t.currentId].concat(t.route).join("/"):n=t.currentId,l.value(e).replace("{1}",n)}):n.computed(function(){return l.value(e)})},p.loadWithOnShow=function(){var e=this;if(!e.withOnShowLoaded||e.val("sourceCache")!==!0)e.withOnShowLoaded=!0,e.val("withOnShow")(function(t){var r=e.bindingContext.createChildContext(t);e.ctx=t,e.childBindingContext=r,e.augmentContext(),n.utils.extend(r,{$page:e}),d(e)},e)},p.loadSource=function(e){var r=this.getValue(),s=this,o=this.element,u=null,a=r.loader||i.loader;if(r.frame==="iframe"){var f=t("iframe",t(o));f.length===0&&(f=t("<iframe></iframe>"),t(o).append(f)),a&&(u=l.value(a)(s,f),u.load()),f.one("load",function(){u&&u.unload(),r.sourceLoaded&&r.sourceLoaded(s)}),n.applyBindingsToNode(f[0],{attr:{src:this.sourceUrl(e)}})}else{a&&(u=l.value(a)(s,s.element),u.load());var c=function(){u&&u.unload(),s.val("withOnShow")?s.val("withOnShow")&&s.loadWithOnShow():d(s),r.sourceLoaded&&r.sourceLoaded(s),s.route&&s.childManager.showChild(s.route)};if(typeof l.value(e)=="string"){var h=l.value(this.sourceUrl(e));m(o,h,function(){c()},s)}else{var p=t(o).children();l.value(e)(this,function(){t.each(p,function(e,t){n.utils.domNodeDisposal.removeNode(t)}),c()})}}};var v=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,m=function(e,r,i,o){var u,a,f,l=t(e),c=r.indexOf(" ");c>=0&&(u=r.slice(c,r.length),r=r.slice(0,c));var h=jQuery.ajax({url:r,type:"GET",dataType:"html",complete:function(e,t){i&&l.each(i,f||[e.responseText,t,e])}}).done(function(e){f=arguments,t.each(l.children(),function(e,t){n.utils.domNodeDisposal.removeNode(t)}),l.html(u?jQuery("<div>").append(e.replace(v,"")).find(u):e)});return h.fail(function(){s(o,"onSourceError",{url:r,xhrPromise:h})}),l};p.show=function(t){var n=this.element,r=this;r.showElementWrapper(t),r.val("title")&&(e.document.title=r.val("title"));if(r.val("sourceOnShow")){if(!r.val("sourceCache")||!n.__pagerLoaded__||typeof r.val("sourceCache")=="number"&&n.__pagerLoaded__+r.val("sourceCache")*1e3<i.now())n.__pagerLoaded__=i.now(),r.loadSource(r.val("sourceOnShow"))}else r.val("withOnShow")&&r.loadWithOnShow()},p.showElementWrapper=function(e){var t=this;s(t,"beforeShow"),t.showElement(e),t.val("scrollToTop")&&t.element.scrollIntoView(),s(t,"afterShow")},p.showElement=function(e){this.val("showElement")?this.val("showElement")(this,e):this.val("fx")?i.fx[this.val("fx")].showElement(this,e):i.showElement?i.showElement(this,e):t(this.element).show(e)},p.hideElementWrapper=function(e){this.isVisible(!1),s(this,"beforeHide"),this.hideElement(e),s(this,"afterHide")},p.hideElement=function(e){this.val("hideElement")?this.val("hideElement")(this,e):this.val("fx")?i.fx[this.val("fx")].hideElement(this,e):i.hideElement?i.hideElement(this,e):(t(this.element).hide(),e&&e())},p.getFullRoute=function(){return this._fullRoute?this._fullRoute:(this._fullRoute=n.computed(function(){var e=null;return this.currentParentPage&&this.currentParentPage()?(e=this.currentParentPage().getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):this.parentPage?(e=this.parentPage.getFullRoute()().slice(0),e.push(this.originalRoute()||this.getId()),e):[]},this),this._fullRoute)},p.getRole=function(){return this.val("role")||"next"},p.nullObject=new i.Page,p.nullObject.children=n.observableArray([]),p.child=function(e){var r=this;return r._child==null&&(r._child={}),r._child[e]||(r._child[e]=n.computed(function(){var n=t.grep(this.children(),function(t){return t.id()===e})[0];return n||this.nullObject},this)),r._child[e]},n.bindingHandlers.page={init:function(e,t,n,r,s){var o=null;return l.value(t())instanceof i.Page?(o=l.value(t()),o.element=e,o.allBindingsAccessor==null&&(o.allBindingsAccessor=n),o.viewModel==null&&(o.viewModel=r),o.bindingContext==null&&(o.bindingContext=s)):o=new i.Page(e,t,n,r,s),o.init()}},i.useHTML5history=!1,i.rootURI="/",i.Href=function(e,t,r,i,s){this.element=e,this.bindingContext=s,this.path=n.observable(),this.pageOrRelativePath=n.observable(t)};var g=i.Href.prototype;return g.getParentPage=function(){return i.getParentPage(this.bindingContext)},g.init=function(){var e=this,t=e.getParentPage();e.path=n.computed(function(){var n=l.value(e.pageOrRelativePath()());return t.path(n)})},i.Href.hash="#",g.bind=function(){n.applyBindingsToNode(this.element,{attr:{href:this.path}})},g.update=function(e){this.pageOrRelativePath(e)},i.Href5=function(e,t,n,r,s){i.Href.apply(this,arguments)},i.Href5.prototype=new i.Href,i.Href5.history=e.History,i.Href5.prototype.bind=function(){var e=this;n.applyBindingsToNode(e.element,{attr:{href:e.path},click:function(){var n=e.path();if(n===""||n==="/")n=t("base").attr("href");i.Href5.history.pushState(null,null,n)}})},n.bindingHandlers["page-href"]={init:function(e,t,n,r,s){var o=i.useHTML5history?i.Href5:i.Href,u=new o(e,t,n,r,s);u.init(),u.bind(),e.__ko__page=u},update:function(e,t){e.__ko__page.update(t)}},i.fx={},i.fx.cssAsync=function(e){return{showElement:function(n,r){var i=t(n.element);i.addClass(e),i.show();var s=setInterval(function(){clearInterval(s),i.addClass(e+"-in")},10),o=setInterval(function(){clearInterval(o),r&&r()},300)},hideElement:function(n,r){var i=t(n.element);if(!n.pageHiddenOnce)n.pageHiddenOnce=!0,i.hide();else{i.removeClass(e+"-in");var s=setInterval(function(){clearInterval(s),r&&r(),i.hide()},300)}}}},i.fx.zoom=i.fx.cssAsync("pagerjs-fx-zoom"),i.fx.flip=i.fx.cssAsync("pagerjs-fx-flip"),i.fx.popout=i.fx.cssAsync("pagerjs-fx-popout-modal"),i.fx.jQuerySync=function(e,n){return{showElement:function(n,r){e.call(t(n.element),300,r)},hideElement:function(e,r){n.call(t(e.element),300,function(){t(e.element).hide()}),r&&r()}}},i.fx.slide=i.fx.jQuerySync(t.fn.slideDown,t.fn.slideUp),i.fx.fade=i.fx.jQuerySync(t.fn.fadeIn,t.fn.fadeOut),i.startHistoryJs=function(t){var n=typeof t=="string"?t:null;n&&i.Href5.history.pushState(null,null,n),i.Href5.history.Adapter.bind(e,"statechange",function(){var e=i.Href5.history.getState().url.replace(i.Href5.history.getBaseUrl(),"");a(e)}),i.Href5.history.Adapter.bind(e,"anchorchange",function(){a(location.hash)}),(!t||!t.noGo)&&a(History.getState().url.replace(History.getBaseUrl(),""))},i.startHashChange=function(n){var r=typeof n=="string"?n:null;r&&(e.location.hash=i.Href.hash+r),t(e).hashchange(function(){a(e.location.hash)}),(!n||!n.noGo)&&t(e).hashchange()},i.start=function(n){var r=typeof n=="string"?n:null;r&&(e.location.hash=i.Href.hash+r);var s=function(){a(e.location.hash)};t(e).bind("hashchange",s),(!n||!n.noGo)&&s()},i},n=e.define;typeof n=="function"&&typeof n.amd=="object"&&n.amd?n(["knockout","jquery"],function(e){return t($,e)}):e.pager=t($,ko)})(window);
View
1,097 pagerjs.com/index.html
@@ -65,293 +65,6 @@
</li>
<li>
- <a href="#reference-manual">Reference Manual</a>
-
- <ul>
-
- <li>
- <a href="#reference-manual/pager-page-pager-page">`pager.page : pager.Page`</a>
- </li>
-
- <li>
- <a href="#reference-manual/pager-showchild-string">`pager.showChild(String[])`</a>
- </li>
-
- <li>
- <a href="#reference-manual/pager-start-string">`pager.start([String])`</a>
- </li>
-
- <li>
- <a href="#reference-manual/pager-starthashchange-string">`pager.startHashChange([String])`</a>
- </li>
-
- <li>
- <a href="#reference-manual/pager-starthistoryjs-string">`pager.startHistoryJs([String])`</a>
- </li>
-
- <li>
- <a href="#reference-manual/pager-extendwithpage-object">`pager.extendWithPage(Object)`</a>
- </li>
-
- <li>
- <a href="#reference-manual/pager-getparentpage-bindingcontext-observable-page">`pager.getParentPage(BindingContext) : Observable(Page)`</a>
- </li>
-
- <li>
- <a href="#reference-manual/page-href">page-href</a>
- </li>
-
- <li>
- <a href="#reference-manual/page">page</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <a href="#configurations">Configurations</a>
-
- <ul>
-
- <li>
- <a href="#configurations/string-id">{String} id</a>
- </li>
-
- <li>
- <a href="#configurations/object-with">{Object} with</a>
- </li>
-
- <li>
- <a href="#configurations/function-withonshow">{Function} withOnShow</a>
- </li>
-
- <li>
- <a href="#configurations/string-function-source">{String/Function} source</a>
- </li>
-
- <li>
- <a href="#configurations/function-sourceloaded">{Function} sourceLoaded</a>
- </li>
-
- <li>
- <a href="#configurations/string-function-sourceonshow">{String/Function} sourceOnShow</a>
- </li>
-
- <li>
- <a href="#configurations/boolean-number-sourcecache">{Boolean/Number} sourceCache</a>
- </li>
-
- <li>
- <a href="#configurations/string-frame">{String} frame</a>
- </li>
-
- <li>
- <a href="#configurations/boolean-modal">{Boolean} modal</a>
- </li>
-
- <li>
- <a href="#configurations/function-beforehide">{Function} beforeHide</a>
- </li>
-
- <li>
- <a href="#configurations/function-beforeshow">{Function} beforeShow</a>
- </li>
-
- <li>
- <a href="#configurations/function-afterhide">{Function} afterHide</a>
- </li>
-
- <li>
- <a href="#configurations/function-aftershow">{Function} afterShow</a>
- </li>
-
- <li>
- <a href="#configurations/function-hideelement">{Function} hideElement</a>
- </li>
-
- <li>
- <a href="#configurations/function-showelement">{Function} showElement</a>
- </li>
-
- <li>
- <a href="#configurations/function-loader">{Function} loader</a>
- </li>
-
- <li>
- <a href="#configurations/function-navigationfailed">{Function} navigationFailed</a>
- </li>
-
- <li>
- <a href="#configurations/object-params">{Object} params</a>
- </li>
-
- <li>
- <a href="#configurations/string-observable-nameparam">{String/Observable} nameParam</a>
- </li>
-
- <li>
- <a href="#configurations/function-guard">{Function} guard</a>
- </li>
-
- <li>
- <a href="#configurations/string-fx">{String} fx</a>
- </li>
-
- <li>
- <a href="#configurations/object-vars">{Object} vars</a>
- </li>
-
- <li>
- <a href="#configurations/boolean-deep">{Boolean} deep</a>
- </li>
-
- <li>
- <a href="#configurations/string-urltoggle">{String} urlToggle</a>
- </li>
-
- <li>
- <a href="#configurations/function-onbindingerror">{Function} onBindingError</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <a href="#cookbook">Cookbook</a>
-
- <ul>
-
- <li>
- <a href="#cookbook/display-page-with-id-start-by-default">Display page with id start by default</a>
- </li>
-
- <li>
- <a href="#cookbook/navigate-to-page-using-scoped-ids">Navigate to page using scoped IDs.</a>
- </li>
-
- <li>
- <a href="#cookbook/deep-navigation">Deep navigation</a>
- </li>
-
- <li>
- <a href="#cookbook/load-external-content-into-a-page-using-source-and-trigger-sourceloaded-event">Load external content into a page using `source` and trigger `sourceLoaded` event</a>
- </li>
-
- <li>
- <a href="#cookbook/lazy-load-an-external-content-into-a-page-if-sourceonshow-is-declared">Lazy load an external content into a page if `sourceOnShow` is declared</a>
- </li>
-
- <li>
- <a href="#cookbook/cache-lazy-loaded-content-when-sourcecache-true">Cache lazy loaded content when `sourceCache: true`</a>
- </li>
-
- <li>
- <a href="#cookbook/cache-lazy-loaded-content-the-number-of-seconds-specified-by-sourcecache">Cache lazy loaded content the number of seconds specified by `sourceCache`</a>
- </li>
-
- <li>
- <a href="#cookbook/specify-relative-page-paths-using-page-href">Specify relative page paths using `page-href`</a>
- </li>
-
- <li>
- <a href="#cookbook/change-binding-context-using-with">Change binding context using `with`</a>
- </li>
-
- <li>
- <a href="#cookbook/withonshow-will-lazy-bind-a-new-view-model-to-the-page">`withOnShow` will lazy bind a new view model to the page</a>
- </li>
-
- <li>
- <a href="#cookbook/match-wildcard-ids-if-no-other-id-can-match-exactly">Match wildcard IDs if no other ID can match exactly</a>
- </li>
-
- <li>
- <a href="#cookbook/deep-navigation-with-wildcards">Deep navigation with wildcards</a>
- </li>
-
- <li>
- <a href="#cookbook/send-wildcards-as-parameter-to-source-method">Send wildcards as parameter to source-method</a>
- </li>
-
- <li>
- <a href="#cookbook/load-content-into-iframes">Load content into iframes</a>
- </li>
-
- <li>
- <a href="#cookbook/route-to-custom-widgets-dialogs-carousels-accordions">Route to custom widgets (dialogs, carousels, accordions)</a>
- </li>
-
- <li>
- <a href="#cookbook/circumvent-the-routing">Circumvent the routing</a>
- </li>
-
- <li>
- <a href="#cookbook/navigate-into-a-layer-modal-dialog-without-losing-context">Navigate into a layer (modal dialog) without losing context</a>
- </li>
-
- <li>
- <a href="#cookbook/navigate-into-a-layer-modal-dialog-and-lose-context">Navigate into a layer (modal dialog) and lose context</a>
- </li>
-
- <li>
- <a href="#cookbook/change-the-page-title">Change the page title</a>
- </li>
-
- <li>
- <a href="#cookbook/run-custom-js-on-before-after-navigate-from-to">Run custom JS on &quot;before/after navigate from/to&quot;</a>
- </li>
-
- <li>
- <a href="#cookbook/supply-custom-showelement-and-hideelement-methods">Supply custom showElement and hideElement-methods</a>
- </li>
-
- <li>
- <a href="#cookbook/specify-loaders-in-pages">Specify loaders in pages</a>
- </li>
-
- <li>
- <a href="#cookbook/specify-global-loaders">Specify global loaders</a>
- </li>
-
- <li>
- <a href="#cookbook/tab-panel-custom-widget">Tab panel custom widget</a>
- </li>
-
- <li>
- <a href="#cookbook/react-to-a-failed-navigation">React to a failed navigation</a>
- </li>
-
- <li>
- <a href="#cookbook/load-view-content-using-a-custom-method">Load view content using a custom method</a>
- </li>
-
- <li>
- <a href="#cookbook/send-uri-fragment-identifier-parameters-to-a-page">Send URI (fragment identifier) parameters to a page</a>
- </li>
-
- <li>
- <a href="#cookbook/add-guards">Add guards</a>
- </li>
-
- <li>
- <a href="#cookbook/add-observables-without-connection-to-the-view-model">Add observables without connection to the view model</a>
- </li>
-
- <li>
- <a href="#cookbook/deep-loading-content-into-wildcards">Deep loading content into wildcards</a>
- </li>
-
- <li>
- <a href="#cookbook/specify-a-start-page">Specify a start page</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
<a href="#faq">FAQ</a>
<ul>
@@ -449,78 +162,13 @@
<p>This makes it easier to design very large scale single page web sites.
</p>
-<p>This readme is for version 0.7 (development version towards 0.8 milestone). See the r0.6-branch for the latest
-stable milestone.
+<p>This readme is for version 0.7 (development version towards 0.8 milestone).
</p>
<h2 id='getting-started'>Getting Started</h2 id='getting-started'>
-<ol>
-<li>Download the <a href="https://raw.github.com/finnsson/pagerjs/master/pager.js">developer</a> version
-or the <a href="https://raw.github.com/finnsson/pagerjs/master/dist/pager.min.js">minified</a> version
-of pager.js</li>
-<li><p>Include all dependencies (jQuery, KnockoutJS) as well as pager.js in your site
-using either AMD or non-AMD:</p>
-<pre><code> // AMD
- requirejs.config({
- shim: {
- history: ['jquery'], // iff using History.js
- hashchange: ['jquery'] // iff using jquery hashchange
- },
- paths:{
- jquery:'jquery-1.8.2.min',
- knockout:'knockout-2.1.0',
- pager:'pager.amd.min',
- // iff using jquery hashchange
- hashchange:'jquery.ba-hashchange.min',
- // iff using History.js
- history: 'jquery.history'
- }
- });
-
- // non-AMD
- <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"jquery-1.8.2.min.js"</span>></span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>></span>
- <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"knockout-2.1.0.js"</span>></span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>></span>
- <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"pager.js"</span>></span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>></span>
-
- // iff using jQuery Hashchange
- <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"jquery.ba-hashchange.min"</span>></span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>></span>
-
- // iff using History.js
- <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"jquery.history.js"</span>></span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>></span>
- <span class="tag">&lt;<span class="title">base</span> <span class="attribute">href</span>=<span class="value">"absolute-URI-to-index.html/"</span>/></span>
- <span class="comment">&lt;!-- where absolute-URI-to-index.html can be e.g. www.examepl.com/foo/ --></span></code></pre>
-</li>
-</ol>
-<ol>
-<li><p>Insert the lines:</p>
-<pre><code> // iff using History<span class="preprocessor">.js</span>
- // tell page-href to use page-href5
- pager<span class="preprocessor">.useHTML</span>5history = true<span class="comment">;</span>
- // tell page-href5 to use History<span class="preprocessor">.js</span> instead of history
- pager<span class="preprocessor">.Href</span>5<span class="preprocessor">.history</span> = History<span class="comment">;</span>
-
- // always
- pager<span class="preprocessor">.extendWithPage</span>(viewModel)<span class="comment">;</span>
- ko<span class="preprocessor">.applyBindings</span>(viewModel)<span class="comment">;</span>
-
- // pick one of these three alternatives <span class="keyword">or</span> develop your own start-method
-
- // <span class="number">1.</span> iff using naïve hashchange - wont work with IE7
- pager<span class="preprocessor">.start</span>()<span class="comment">;</span>
-
- // <span class="number">2.</span> iff using jQuery Hashchange
- pager<span class="preprocessor">.startHashChange</span>()<span class="comment">;</span>
+<p>See the <a href="http://pagerjs.com/demo/">demo</a>.
- // <span class="number">3.</span> iff using History<span class="preprocessor">.js</span>
- pager<span class="preprocessor">.startHistoryJs</span>()<span class="comment">;</span></code></pre>
-</li>
-<li><p>Start using the bindings <code>page</code> and <code>page-href</code>. Consult the
-<a href="http://oscar.finnsson.nu/pagerjs/">web page</a>,
-<a href="http://pagerjs.com/demo/">demo</a>
-or <a href="https://github.com/finnsson/pagerjs/tree/master/test">test cases</a> for how to use the bindings.</p>
-</li>
-<li>Rock &#39;n&#39; Roll!</li>
-</ol>
+</p>
<h2 id='dependencies'>Dependencies</h2 id='dependencies'>
<ul>
<li><a href="http://knockoutjs.com/">KnockoutJS</a></li>
@@ -556,741 +204,6 @@ <h2 id='philosophy'>Philosophy</h2 id='philosophy'>
<p>These MVVM-triads can be developed in isolation and later on connected.
</p>
-<h2 id='reference-manual'>Reference Manual</h2 id='reference-manual'>
-<p>pager.js got some static methods and
-extends KnockoutJS with four custom bindings: <code>page</code>, <code>page-href</code>, <code>page-hash</code> and
-<code>page-href5</code>.
-
-</p>
-<h3 id='reference-manual/pager-page-pager-page'><code>pager.page : pager.Page</code></h3 id='reference-manual/pager-page-pager-page'>
-<p>A reference to the root page, of type <code>pager.Page</code>. This page instance is the same as
-<code>$__page__</code> (or <code>$root.$__page__</code>) in your data binding.
-
-</p>
-<h3 id='reference-manual/pager-showchild-string'><code>pager.showChild(String[])</code></h3 id='reference-manual/pager-showchild-string'>
-<p>Display the pages matching the route (String-array) without changing the location.
-
-</p>
-<p>This method is called by <code>pager.start</code>, <code>pager.startHashChange</code> and <code>pager.startHistoryJS</code>. If you plan to implement
-your own start-method you&#39;ll need to call this method with the calculated route.
-
-</p>
-<h3 id='reference-manual/pager-start-string'><code>pager.start([String])</code></h3 id='reference-manual/pager-start-string'>
-<p>Used if you are using neither <code>jQuery hashchange</code> nor <code>History.js</code>. This method does not work for IE7 and
-can give unexpected results for IE8!
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/setup">Setup</a></li>
-</ul>
-<h3 id='reference-manual/pager-starthashchange-string'><code>pager.startHashChange([String])</code></h3 id='reference-manual/pager-starthashchange-string'>
-<p>Used if you are using <code>jQuery hashchange</code>.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/setup">Setup</a></li>
-</ul>
-<h3 id='reference-manual/pager-starthistoryjs-string'><code>pager.startHistoryJs([String])</code></h3 id='reference-manual/pager-starthistoryjs-string'>
-<p>Used if you are using <code>History.js</code>.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/html5_history">HTML5 History API</a></li>
-<li><a href="http://pagerjs.com/demo/#!/setup">Setup</a></li>
-</ul>
-<h3 id='reference-manual/pager-extendwithpage-object'><code>pager.extendWithPage(Object)</code></h3 id='reference-manual/pager-extendwithpage-object'>
-<p>Extends your root view model with a root page-instance.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/setup">Setup</a></li>
-</ul>
-<h3 id='reference-manual/pager-getparentpage-bindingcontext-observable-page'><code>pager.getParentPage(BindingContext) : Observable(Page)</code></h3 id='reference-manual/pager-getparentpage-bindingcontext-observable-page'>
-<p>Supplying the method with a bindingContext will return the first Page-instance in the
-context hierarchy. If no self-defined Page-instance can be found the root Page-instance will be returned.
-
-</p>
-<pre><code>ko.bindingHandlers[<span class="string">'lorem-ipsum'</span>] = {
- init:<span class="function"><span class="keyword">function</span> <span class="params">(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)</span> {</span>
- <span class="comment">// get the Page-instance that this element resides in</span>
- <span class="keyword">var</span> page = pager.getParentPage(bindingContext);
- <span class="comment">// bind the text of the element to the page title</span>
- ko.applyBindingsToNode(element, {
- text: page.val(<span class="string">'title'</span>)
- });
- }
-};</code></pre>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_navigation_binding">Custom Navigation Binding</a></li>
-</ul>
-<h3 id='reference-manual/page-href'>page-href</h3 id='reference-manual/page-href'>
-<pre><code><span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"page-href: 'somePagePath'"</span>></span><span class="tag">&lt;/<span class="title">a</span>></span>
-
-<span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"page-href: '../some/relative/page/path'"</span>></span><span class="tag">&lt;/<span class="title">a</span>></span>
-
-<span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"page-href: somePageInstance"</span>></span><span class="tag">&lt;/<span class="title">a</span>></span></code></pre>
-<p>Calculates absolute href based on the location of the element.
-
-</p>
-<p>If hashes are used it will be prefixed with <code>#</code> by default. You can change the default prefix
-to e.g. <code>#!/</code> by setting <code>pager.Href.hash = &#39;#!/&#39;;</code>
-
-</p>
-<p>True URLs can use used by either using the <code>page-href5</code> binding or setting <code>pager.useHTML5history = true</code>.
-
-</p>
-<p>History.js can be used by setting <code>pager.Href5.history = History</code> (default to the normal <code>history</code>).
-
-</p>
-<p>It the page-href is supplied a Page-instance the absolute href to the Page-instance is calculated.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/relative_path">Relative path</a></li>
-<li><a href="http://pagerjs.com/demo/#!/absolute_path">Absolute Path</a></li>
-<li><a href="http://pagerjs.com/demo/#!/html5_history">HTML5 History</a></li>
-</ul>
-<h3 id='reference-manual/page'>page</h3 id='reference-manual/page'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {}"</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>The page-binding. See configuration.
-
-</p>
-<h2 id='configurations'>Configurations</h2 id='configurations'>
-<p>The configuration options for the page-binding.
-
-
-</p>
-<h3 id='configurations/string-id'>{String} id</h3 id='configurations/string-id'>
-<p>ID of scoped page that a router should react to. E.g. <code>start</code> or <code>user/me</code>.
-If the id is <code>?</code> (wildcard) it will match anything if no other page in the same parent match.
-
-</p>
-<p>If you are using fragment idetifiers (<code>#</code>) you can control the prefix by setting <code>pager.Href.hash</code>. Setting
-<code>pager.Href.hash = &quot;#!/&quot;</code> before calling <code>paget.start()</code> will tell <code>pager</code> to react to fragments starting with
-<code>#!/</code> instead of simply <code>#</code>.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/setup">Setup</a></li>
-<li><a href="http://pagerjs.com/demo/#!/deep_navigation">Deep Navigation</a></li>
-<li><a href="http://pagerjs.com/demo/#!/matching_wildcards">Matching Wildcards</a></li>
-<li><a href="http://pagerjs.com/demo/#!/deep_navigation_with_wildcards">Deep Navigation with Wildcards</a></li>
-</ul>
-<h3 id='configurations/object-with'>{Object} with</h3 id='configurations/object-with'>
-<p>That can change the scope of elements descendants. The same behavior as the normal <code>with</code>-binding.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/change_binding_context">Change Binding Context</a></li>
-</ul>
-<h3 id='configurations/function-withonshow'>{Function} withOnShow</h3 id='configurations/function-withonshow'>
-<p>Sets the view model of elements descendants async after the page is shown. This is useful
-so you can extract sub pages view models to other <code>.js</code>-files.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/lazy_bind_view_model">Lazy-Bind View-Model</a></li>
-</ul>
-<h3 id='configurations/string-function-source'>{String/Function} source</h3 id='configurations/string-function-source'>
-<p>Source to load into element using <code>jQuery#load</code>. The source will be loaded once the page is processed.
-If it is a function it is invoked.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/load_external_content">Load External Content</a></li>
-<li><a href="http://pagerjs.com/demo/#!/custom_view_loader">Load View using Custom Method</a></li>
-</ul>
-<h3 id='configurations/function-sourceloaded'>{Function} sourceLoaded</h3 id='configurations/function-sourceloaded'>
-<p>Is a method/event/callback to run once the <code>source</code> (or <code>sourceOnShow</code>) is loaded.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/load_external_content">Load External Content</a></li>
-</ul>
-<h3 id='configurations/string-function-sourceonshow'>{String/Function} sourceOnShow</h3 id='configurations/string-function-sourceonshow'>
-<p>Source to load into element using <code>jQuery#load</code> when the element is displayed. Thus sub pages
-can be extracted and loaded on demand. If it is a function it is invoked.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/lazy_load_external_content">Lazy-Load External Content</a></li>
-<li><a href="http://pagerjs.com/demo/#!/custom_view_loader">Load View using Custom Method</a></li>
-</ul>
-<h3 id='configurations/boolean-number-sourcecache'>{Boolean/Number} sourceCache</h3 id='configurations/boolean-number-sourcecache'>
-<p>Can be set to true in order for sourceOnShow to only load the source once.
-If a number is specified the cache is valid for that amount of time in seconds.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/cached_lazy">Cached Lazy-Loaded Content</a></li>
-</ul>
-<h3 id='configurations/string-frame'>{String} frame</h3 id='configurations/string-frame'>
-<p>Can be set to <code>iframe</code> in order for the source to be loaded into an iframe. If the page contains
-an iframe that element is used.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/load_into_iframe">Load Content into iframe</a></li>
-<li><a href="http://pagerjs.com/demo/#!/configure_iframe">Configure an iframe</a></li>
-</ul>
-<h3 id='configurations/boolean-modal'>{Boolean} modal</h3 id='configurations/boolean-modal'>
-<p>Can be set to <code>true</code> in order for the page to act as a modal. If a page is a modal it can be
-found by child-pages to sibling-pages of the modal.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/modals">Modals</a></li>
-</ul>
-<h3 id='configurations/function-beforehide'>{Function} beforeHide</h3 id='configurations/function-beforehide'>
-<p>Is called before the page is hidden.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_js_when_navigating">Custom JS when Navigating</a></li>
-</ul>
-<h3 id='configurations/function-beforeshow'>{Function} beforeShow</h3 id='configurations/function-beforeshow'>
-<p>Is called before the page is shown.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_js_when_navigating">Custom JS when Navigating</a></li>
-</ul>
-<h3 id='configurations/function-afterhide'>{Function} afterHide</h3 id='configurations/function-afterhide'>
-<p>Is called after the page is hidden.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_js_when_navigating">Custom JS when Navigating</a></li>
-</ul>
-<h3 id='configurations/function-aftershow'>{Function} afterShow</h3 id='configurations/function-aftershow'>
-<p>Is called after the page is shown.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_js_when_navigating">Custom JS when Navigating</a></li>
-</ul>
-<h3 id='configurations/function-hideelement'>{Function} hideElement</h3 id='configurations/function-hideelement'>
-<p>Custom hide-method instead of the default <code>$(element).hide()</code>;
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_hide_show">Custom Hide- and Show-Methods</a></li>
-</ul>
-<h3 id='configurations/function-showelement'>{Function} showElement</h3 id='configurations/function-showelement'>
-<p>Custom show-method instead of the default <code>$(element).show()</code>;
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/custom_hide_show">Custom Hide- and Show-Methods</a></li>
-</ul>
-<h3 id='configurations/function-loader'>{Function} loader</h3 id='configurations/function-loader'>
-<p>Loader to call once the page is loaded. Can e.g. create a spinner inside the element.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/loader">Loader</a></li>
-</ul>
-<h3 id='configurations/function-navigationfailed'>{Function} navigationFailed</h3 id='configurations/function-navigationfailed'>
-<p>Method to call if a navigation could not find any matching page.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/failed_navigation">Reacting to Failed Navigation</a></li>
-</ul>
-<h3 id='configurations/object-params'>{Object} params</h3 id='configurations/object-params'>
-<p>Binds URL-parameters to local observables.
-
-</p>
-<ul>
-<li><p><a href="http://pagerjs.com/demo/#!/params">Binding URI parameters</a></p>
-</li>
-<li><p><a href="http://pagerjs.com/demo/#!/binding_params_object">Parameters as objects</a></p>
-</li>
-</ul>
-<h3 id='configurations/string-observable-nameparam'>{String/Observable} nameParam</h3 id='configurations/string-observable-nameparam'>
-<p>Bind the current wildcard ID to an observable.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/binding_wildcard_to_observable">Binding Wildcard to Observable</a></li>
-</ul>
-<h3 id='configurations/function-guard'>{Function} guard</h3 id='configurations/function-guard'>
-<p>Validates a page transition before it is happening.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/guards">Guards</a></li>
-</ul>
-<h3 id='configurations/string-fx'>{String} fx</h3 id='configurations/string-fx'>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/fx">FX</a></li>
-</ul>
-<h3 id='configurations/object-vars'>{Object} vars</h3 id='configurations/object-vars'>
-<p>Created scoped observables for the view. Useful for when observables are needed purely for the view
-and has no connection to the view-model.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/vars">Custom observables in the view</a></li>
-</ul>
-<h3 id='configurations/boolean-deep'>{Boolean} deep</h3 id='configurations/boolean-deep'>
-<p>By setting <code>deep: true</code> a wildcard page will deep-load supplied sources.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/deep_load_content_into_wildcard">Deep Load Content into Wildcard</a></li>
-</ul>
-<h3 id='configurations/string-urltoggle'>{String} urlToggle</h3 id='configurations/string-urltoggle'>
-<p>Control when the page will be displayed or hidden. There are three possible values: <code>null</code> (default), <code>show</code> or <code>none</code>.
-
-</p>
-<p><code>null</code> is the normal behaviour.
-
-</p>
-<p><code>show</code> makes the page show when the route is matching, but wont automatically hide.
-
-</p>
-<p><code>none</code> means that the page does not react to the route. You&#39;ll need to control the visibility of the page
-in some other way. Pages with <code>urlToggle: &#39;none&#39;</code> will be visible by default.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/url_toggle_show">Pages that only toggle on</a></li>
-</ul>
-<h3 id='configurations/function-onbindingerror'>{Function} onBindingError</h3 id='configurations/function-onbindingerror'>
-<p>When a page failes to data binding its content it will trigger the callback <code>onBindingError</code>.
-
-</p>
-<p>This can be useful for e.g. cleaning up failing pages.
-
-</p>
-<ul>
-<li><a href="http://pagerjs.com/demo/#!/binding_error">Binding Error</a></li>
-</ul>
-<h2 id='cookbook'>Cookbook</h2 id='cookbook'>
-<p>The following behaviors specify and exemplify what pager.js is capable of.
-
-</p>
-<h3 id='cookbook/display-page-with-id-start-by-default'>Display page with id start by default</h3 id='cookbook/display-page-with-id-start-by-default'>
-<pre><code><span class="tag">&lt;<span class="title">div</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'bar'}"</span>></span>Bar<span class="tag">&lt;/<span class="title">div</span>></span>
- <span class="comment">&lt;!-- Foo is displayed --></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>Foo<span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/navigate-to-page-using-scoped-ids'>Navigate to page using scoped IDs.</h3 id='cookbook/navigate-to-page-using-scoped-ids'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id:'start'}"</span>></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#foo"</span>></span>Go to foo<span class="tag">&lt;/<span class="title">a</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'foo'}"</span>></span>
- Foo. Go to <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#start"</span>></span>start<span class="tag">&lt;/<span class="title">a</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/deep-navigation'>Deep navigation</h3 id='cookbook/deep-navigation'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"start"</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#user/fry"</span>></span>Go to Fry<span class="tag">&lt;/<span class="title">a</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span>
-
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"user"</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'user'}"</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"fry"</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'fry'}"</span>></span>Fry<span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/load-external-content-into-a-page-using-source-and-trigger-sourceloaded-event'>Load external content into a page using <code>source</code> and trigger <code>sourceLoaded</code> event</h3 id='cookbook/load-external-content-into-a-page-using-source-and-trigger-sourceloaded-event'>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">lorem'</span>, <span class="title">source</span>: '<span class="title">lorem</span>.<span class="title">html</span> .<span class="title">content'</span>, <span class="title">sourceLoaded</span>: <span class="title">loremIsLoaded</span>}</span>">&lt;/div></span></code></pre>
-<p>The source can contain a selector (see <code>.content</code> above) in order to extract a fragment on the site.
-In the example above <code>loremIsLoaded</code> is a function that is triggered after <code>lorem.html</code> is loaded.
-
-</p>
-<h3 id='cookbook/lazy-load-an-external-content-into-a-page-if-sourceonshow-is-declared'>Lazy load an external content into a page if <code>sourceOnShow</code> is declared</h3 id='cookbook/lazy-load-an-external-content-into-a-page-if-sourceonshow-is-declared'>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">lazyLorem'</span>, <span class="title">sourceOnShow</span>: '<span class="title">lorem</span>.<span class="title">html</span> .<span class="title">content'</span>}</span>">&lt;/div></span></code></pre>
-<p><code>sourceOnShow</code> tells the page to load the content when the page is displayed.
-
-</p>
-<h3 id='cookbook/cache-lazy-loaded-content-when-sourcecache-true'>Cache lazy loaded content when <code>sourceCache: true</code></h3 id='cookbook/cache-lazy-loaded-content-when-sourcecache-true'>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">lazyLoremCached'</span>, <span class="title">sourceOnShow</span>: '<span class="title">lorem</span>.<span class="title">html</span> .<span class="title">content'</span>, <span class="title">sourceCache</span>: <span class="title">true</span>}</span>">&lt;/div></span></code></pre>
-<h3 id='cookbook/cache-lazy-loaded-content-the-number-of-seconds-specified-by-sourcecache'>Cache lazy loaded content the number of seconds specified by <code>sourceCache</code></h3 id='cookbook/cache-lazy-loaded-content-the-number-of-seconds-specified-by-sourcecache'>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">lazyLoremCached5seconds'</span>, <span class="title">sourceOnShow</span>: '<span class="title">lorem</span>.<span class="title">html</span> .<span class="title">content'</span>, <span class="title">sourceCache</span>: 5}</span>">&lt;/div></span></code></pre>
-<p><code>sourceCache</code> can specify the amount of seconds the external content should be cached.
-
-</p>
-<h3 id='cookbook/specify-relative-page-paths-using-page-href'>Specify relative page paths using <code>page-href</code></h3 id='cookbook/specify-relative-page-paths-using-page-href'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>
- <span class="comment">&lt;!-- This will update href to #start/bender --></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"page-href: 'bender'"</span>></span>Bender<span class="tag">&lt;/<span class="title">a</span>></span>
-
- <span class="comment">&lt;!-- This will update href to #admin/login --></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"page-href: '../admin/login'"</span>></span>Admin Login<span class="tag">&lt;/<span class="title">a</span>></span>
-
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'bender'}"</span>></span>Bender!<span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'admin'}"</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'login'}"</span>></span>Login<span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>Based on the total path of the page the binding calculates an absolute href.
-
-</p>
-<h3 id='cookbook/change-binding-context-using-with'>Change binding context using <code>with</code></h3 id='cookbook/change-binding-context-using-with'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'user', with: user}"</span>></span>
- <span class="comment">&lt;!-- Here name is user.name --></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"text: name"</span>></span><span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/withonshow-will-lazy-bind-a-new-view-model-to-the-page'><code>withOnShow</code> will lazy bind a new view model to the page</h3 id='cookbook/withonshow-will-lazy-bind-a-new-view-model-to-the-page'>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">user'</span>, <span class="title">withOnShow</span>: <span class="title">someMethod</span>('<span class="title">someMethod'</span>)}</span>">&lt;/div></span></code></pre>
-<p><code>someMethod</code> must return a function that takes a callback that takes a view model.
-
-</p>
-<p>E.g.
-
-</p>
-<pre><code><span class="function"><span class="keyword">function</span> <span class="title">requireVM</span><span class="params">(module)</span> {</span>
- <span class="keyword">return</span> <span class="keyword">function</span>(callback) {
- require([module], <span class="keyword">function</span>(<span class="built_in">mod</span>) {
- callback(<span class="built_in">mod</span>.getVM());
- });
- };
-}</code></pre>
-<h3 id='cookbook/match-wildcard-ids-if-no-other-id-can-match-exactly'>Match wildcard IDs if no other ID can match exactly</h3 id='cookbook/match-wildcard-ids-if-no-other-id-can-match-exactly'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'admin'}"</span>></span><span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="comment">&lt;!-- The page below match anything except 'admin' --></span>
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: '?'}"</span>></span><span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/deep-navigation-with-wildcards'>Deep navigation with wildcards</h3 id='cookbook/deep-navigation-with-wildcards'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#user/leela"</span>></span>Go to Leela<span class="tag">&lt;/<span class="title">a</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span>
-
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: '?'}"</span>></span>
- Misc:
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'leela'}"</span>></span>
- Leela
- <span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/send-wildcards-as-parameter-to-source-method'>Send wildcards as parameter to source-method</h3 id='cookbook/send-wildcards-as-parameter-to-source-method'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#user/fry"</span>></span>Go to Fry<span class="tag">&lt;/<span class="title">a</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span>
-
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'user'}"</span>></span>
- User:
- <span class="comment">&lt;!-- {1} will be replaced with whatever matched the wildcard --></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: '?', sourceOnShow: 'user/{1}.html'}"</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/load-content-into-iframes'>Load content into iframes</h3 id='cookbook/load-content-into-iframes'>
-<pre><code><span class="comment">&lt;!-- An iframe will be created inside the div --></span>
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'user', frame: 'iframe', source: 'user.html'}"</span>></span><span class="tag">&lt;/<span class="title">div</span>></span>
-
-<span class="comment">&lt;!-- The iframe specified will be used --></span>
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'fry', frame: 'iframe', source: 'fry.html'}"</span>></span>
- <span class="tag">&lt;<span class="title">iframe</span> <span class="attribute">sandbox</span>=<span class="value">""</span>></span><span class="tag">&lt;/<span class="title">iframe</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/route-to-custom-widgets-dialogs-carousels-accordions'>Route to custom widgets (dialogs, carousels, accordions)</h3 id='cookbook/route-to-custom-widgets-dialogs-carousels-accordions'>
-<p>It is possible to create custom widgets that jack into the pager-system.
-The <code>page</code>-binding (<code>pager.Page</code>-class) is possible to extend at multiple points.
-
-</p>
-<h3 id='cookbook/circumvent-the-routing'>Circumvent the routing</h3 id='cookbook/circumvent-the-routing'>
-<p>Since pager is not responsible for listening on the location it is possible to
-circumvent the routing using the router used. Just do not use <code>pager.start</code>.
-
-</p>
-<h3 id='cookbook/navigate-into-a-layer-modal-dialog-without-losing-context'>Navigate into a layer (modal dialog) without losing context</h3 id='cookbook/navigate-into-a-layer-modal-dialog-without-losing-context'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'admin'}>
- &lt;a href="</span>#<span class="attribute">start</span>/<span class="attribute">admin</span>/<span class="attribute">ok</span>"></span>Show OK<span class="tag">&lt;/<span class="title">a</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'ok', modal: true, title: 'OK?'}"</span>></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#admin"</span>></span>OK?<span class="tag">&lt;/<span class="title">a</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>If a <code>page</code> is set to <code>modal</code> is can match IDs deeper down the hierarchy. In this case
-start/ok also matches start/admin/ok making the page available as a modal dialog
-in other contexts.
-
-</p>
-<h3 id='cookbook/navigate-into-a-layer-modal-dialog-and-lose-context'>Navigate into a layer (modal dialog) and lose context</h3 id='cookbook/navigate-into-a-layer-modal-dialog-and-lose-context'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'start'}"</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'admin'}>
- &lt;a href="</span>#<span class="attribute">start</span>/<span class="attribute">ok</span>"></span>Show OK<span class="tag">&lt;/<span class="title">a</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'ok', modal: true}"</span>></span>
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#admin"</span>></span>OK?<span class="tag">&lt;/<span class="title">a</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>Losing the context is nothing special. Just navigate away form the current page.
-
-</p>
-<h3 id='cookbook/change-the-page-title'>Change the page title</h3 id='cookbook/change-the-page-title'>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'fry', title: 'Fry'}"</span>></span>
- Fry
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>Setting the &#39;title&#39; configuration property will update the document title when navigating to
-the page.
-
-
-</p>
-<h3 id='cookbook/run-custom-js-on-before-after-navigate-from-to'>Run custom JS on &quot;before/after navigate from/to&quot;</h3 id='cookbook/run-custom-js-on-before-after-navigate-from-to'>
-<p>There are four alternatives:
-
-</p>
-<ul>
-<li>global registration using pager.childManager</li>
-<li>global data binding on body using <code>click</code></li>
-<li>local data binding on anchor using <code>click</code></li>
-<li>local data binding on page using <code>beforeHide</code>, <code>afterHide</code>, <code>beforeShow</code>, and <code>afterShow</code></li>
-</ul>
-<pre><code>// global registration using pager.childManager
-ko.computed(function() {
- var currentChild = pager.childManager.currentChildO();
- if(currentChild) {
- // do something
- }
-});
-
-<span class="tag">&lt;<span class="title">body</span> <span class="attribute">data-bind</span>=<span class="value">"click: globalClick"</span>></span>
-
- // local data binding on page
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'fry', beforeHide: beforeFryIsHidden}"</span>></span><span class="tag">&lt;/<span class="title">div</span>></span>
-
- // local data binding on anchor using click
- <span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"page-href: 'fry' click: anchorClicked}"</span>></span>Go to Fry<span class="tag">&lt;/<span class="title">a</span>></span>
-
-<span class="tag">&lt;/<span class="title">body</span>></span>
-
-var beforeFryIsHidden = function(page) {
- console.error(page);
-};
-
-var anchorClicked = function(page, e) {
- // otherwise the event will be stopped
- return true;
-};
-
-var globalClick = function() {
- // otherwise the event will be stopped
- return true;
-};</code></pre>
-<p>The click data-binding can be used to run validations before navigations. Just do not <code>return true</code>
-to prevent the navigation from happening.
-
-
-</p>
-<h3 id='cookbook/supply-custom-showelement-and-hideelement-methods'>Supply custom showElement and hideElement-methods</h3 id='cookbook/supply-custom-showelement-and-hideelement-methods'>
-<pre><code>&lt;div data-bind=<span class="string">"page: {id: 'fry', showElement: showFry, hideElement: hideFry}"</span>>
- Fry
-&lt;/div>
-
-// new default hide
-pager<span class="preprocessor">.hideElement</span> = function(page, callback) {
- $(page<span class="preprocessor">.element</span>)<span class="preprocessor">.slideUp</span>(<span class="number">600</span>)<span class="comment">;</span>
- if(callback) {
- callback()<span class="comment">;</span>
- }
-}<span class="comment">;</span>
-
-// new default show
-pager<span class="preprocessor">.showElement</span> = function(page, callback) {
- $(page<span class="preprocessor">.element</span>)<span class="preprocessor">.slideDown</span>(<span class="number">600</span>)<span class="comment">;</span>
- if(callback) {
- callback()<span class="comment">;</span>
- }
-}<span class="comment">;</span>
-
-var showFry = function(page, callback) {
- $(page<span class="preprocessor">.element</span>)<span class="preprocessor">.fadeIn</span>(<span class="number">500</span>, callback)<span class="comment">;</span>
-}<span class="comment">;</span>
-var hideFry = function(page, callback) {
- $(page<span class="preprocessor">.element</span>)<span class="preprocessor">.fadeOut</span>(<span class="number">500</span>, callback)<span class="comment">;</span>
-}<span class="comment">;</span></code></pre>
-<h3 id='cookbook/specify-loaders-in-pages'>Specify loaders in pages</h3 id='cookbook/specify-loaders-in-pages'>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">zoidberg'</span>, <span class="title">title</span>: '<span class="type">Zoidberg</span>', <span class="title">loader</span>: <span class="title">loader</span>, <span class="title">sourceOnShow</span>: '<span class="title">zoidberg</span>.<span class="title">html'</span>}</span>" /></span></code></pre>
-<p>where
-
-</p>
-<pre><code>textLoader: function(page, element) {
- var loader = {};
- var txt = $('<span class="tag">&lt;<span class="title">div</span>></span><span class="tag">&lt;/<span class="title">div</span>></span>', {text: 'Loading ' + page.getValue().title});
- loader.load = function() {
- $(element).append(txt);
- };
- loader.unload = function() {
- txt.remove();
- };
- return loader;
-}</code></pre>
-<h3 id='cookbook/specify-global-loaders'>Specify global loaders</h3 id='cookbook/specify-global-loaders'>
-<pre><code><span class="comment">// see textLoader above</span>
-pager<span class="variable">.loader</span> = textLoader;</code></pre>
-<h3 id='cookbook/tab-panel-custom-widget'>Tab panel custom widget</h3 id='cookbook/tab-panel-custom-widget'>
-<pre><code><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"nav nav-tabs"</span> <span class="attribute">data-bind</span>=<span class="value">"foreach: $page.children"</span>></span>
- <span class="tag">&lt;<span class="title">li</span> <span class="attribute">data-bind</span>=<span class="value">"css: {active: isVisible}"</span>></span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"text: $data.getValue().title, page-href: getId()"</span>></span><span class="tag">&lt;/<span class="title">a</span>></span><span class="tag">&lt;/<span class="title">li</span>></span>
-<span class="tag">&lt;/<span class="title">ul</span>></span>
-
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'Slagsmålsklubben', title: 'Slagsmålsklubben',
- sourceOnShow: 'https://embed.spotify.com/?uri=spotify:album:66KBDVJnA6c0DjHeSZYaHb', frame: 'iframe'}"</span> <span class="attribute">class</span>=<span class="value">"hero-unit"</span>></span>
- <span class="tag">&lt;<span class="title">iframe</span> <span class="attribute">width</span>=<span class="value">"300"</span> <span class="attribute">height</span>=<span class="value">"380"</span> <span class="attribute">frameborder</span>=<span class="value">"0"</span> <span class="attribute">allowtransparency</span>=<span class="value">"true"</span>></span><span class="tag">&lt;/<span class="title">iframe</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span>
-
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'Binärpilot', title: 'Binärpilot',
- sourceOnShow: 'https://embed.spotify.com/?uri=spotify:album:67LKycg4jAoC06kZgjvbNd', frame: 'iframe'}"</span> <span class="attribute">class</span>=<span class="value">"hero-unit"</span>></span>
- <span class="tag">&lt;<span class="title">iframe</span> <span class="attribute">width</span>=<span class="value">"300"</span> <span class="attribute">height</span>=<span class="value">"380"</span> <span class="attribute">frameborder</span>=<span class="value">"0"</span> <span class="attribute">allowtransparency</span>=<span class="value">"true"</span>></span><span class="tag">&lt;/<span class="title">iframe</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/react-to-a-failed-navigation'>React to a failed navigation</h3 id='cookbook/react-to-a-failed-navigation'>
-<p>Both Page-objects and pager should send events whenever a navigation failed (i.e. no matching page for the route).
-
-</p>
-<pre><code><span class="xml"><span class="tag">&lt;<span class="title">a</span> <span class="attribute">data-bind</span>=<span class="value">"click: function() { window.location.hash = 'failed_navigation/random/' + (Math.random()*</span><span class="number">1000</span><span class="xml">).toFixed() }">
- Go to random sub-page
-<span class="tag">&lt;/<span class="title">a</span>></span>
-
-<span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'random', navigationFailed: randomFailed}"</span>></span>
- <span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"nav nav-tabs"</span> <span class="attribute">data-bind</span>=<span class="value">"foreach: </span><span class="variable">$page.children</span><span class="xml">">
- <span class="tag">&lt;<span class="title">li</span> <span class="attribute">data-bind</span>=<span class="value">"css: {active: isVisible}"</span>></span><span class="tag">&lt;<span class="title">a
-</span> <span class="attribute">data-bind</span>=<span class="value">"text: getId(), page-href: getId()"</span>></span><span class="tag">&lt;/<span class="title">a</span>></span><span class="tag">&lt;/<span class="title">li</span>></span>
- <span class="tag">&lt;/<span class="title">ul</span>></span>
-
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"foreach: newChildren"</span>></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: childId}"</span>></span>
- <span class="tag">&lt;<span class="title">span</span> <span class="attribute">data-bind</span>=<span class="value">"text: childId"</span>></span><span class="tag">&lt;/<span class="title">span</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
- <span class="tag">&lt;/<span class="title">div</span>></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></span></code></pre>
-<p>where
-
-</p>
-<pre><code><span class="label">randomFailed:</span>function (page, route) {
- viewModel<span class="preprocessor">.newChildren</span><span class="preprocessor">.push</span>({
- childId:route[<span class="number">0</span>]
- })<span class="comment">;</span>
- page<span class="preprocessor">.showPage</span>(route)<span class="comment">;</span>
-},
-<span class="label">newChildren:</span>ko<span class="preprocessor">.observableArray</span>([])</code></pre>
-<h3 id='cookbook/load-view-content-using-a-custom-method'>Load view content using a custom method</h3 id='cookbook/load-view-content-using-a-custom-method'>
-<p>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.
-
-</p>
-<p>Thus a way to inject custom views should be possible. This is done using the <code>source</code>- or
-<code>sourceOnShow</code>-properties. Just supply a method instead of a string!
-
-</p>
-<p>These properties takes a method that should take a <code>pager.Page</code> as first argument, a callback, and return nothing.
-
-</p>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">zoidberg'</span>, <span class="title">sourceOnShow</span>: <span class="title">requireView</span>('<span class="title">character</span>/<span class="title">zoidberg'</span>)}</span>" /></span></code></pre>
-<p>where
-
-</p>
-<pre><code>window<span class="preprocessor">.requireView</span> = function(viewModule) {
- return function(page, callback) {
- require([viewModule], function(viewString) {
- $(page<span class="preprocessor">.element</span>)<span class="preprocessor">.html</span>(viewString)<span class="comment">;</span>
- callback()<span class="comment">;</span>
- })<span class="comment">;</span>
- }<span class="comment">;</span>
-}<span class="comment">;</span></code></pre>
-<p>if
-
-</p>
-<pre><code>// file: character/zoidberg.js
-define(function() {
- return '<span class="tag">&lt;<span class="title">h1</span>></span>Zoidberg<span class="tag">&lt;/<span class="title">h1</span>></span>';
-});</code></pre>
-<h3 id='cookbook/send-uri-fragment-identifier-parameters-to-a-page'>Send URI (fragment identifier) parameters to a page</h3 id='cookbook/send-uri-fragment-identifier-parameters-to-a-page'>
-<p>A page should be able to access the information in the current route - changing a view-model.
-
-</p>
-<p>Sending parts of the fragment identifier to variables in the view-model is possible using
-<code>params</code>.
-
-</p>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'search', params: ['name', 'fromdate']}"</span>></span>
- <span class="tag">&lt;<span class="title">span</span> <span class="attribute">data-bind</span>=<span class="value">"text: name"</span>></span><span class="tag">&lt;/<span class="title">span</span>></span> (<span class="tag">&lt;<span class="title">span</span> <span class="attribute">data-bind</span>=<span class="value">"text: fromdate"</span>></span><span class="tag">&lt;/<span class="title">span</span>></span>)
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>where <code>name</code> and <code>fromdate</code> with be bound by the parameters <code>name</code> and <code>fromdate</code>.
-
-</p>
-<p>It is also possible to use a key-value pairs as params
-
-</p>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'search', params: {'name': ko.observable('Pelle'), answer: ko.observable(42)}}"</span>></span>
- <span class="tag">&lt;<span class="title">span</span> <span class="attribute">data-bind</span>=<span class="value">"text: name"</span>></span><span class="tag">&lt;/<span class="title">span</span>></span> (<span class="tag">&lt;<span class="title">span</span> <span class="attribute">data-bind</span>=<span class="value">"text: answer"</span>></span><span class="tag">&lt;/<span class="title">span</span>></span>)
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<p>where <code>name</code>s default value is <code>Pelle</code> and <code>answer</code>s default value is <code>42</code> if non is given from the URL.
-
-</p>
-<p>An example route for the example above could look like
-
-</p>
-<pre><code>example<span class="variable">.com</span>/<span class="preprocessor">#search/tv?name=samsung&amp;fromdate=20121010</span></code></pre>
-<p>or if HTML5 history is used
-
-</p>
-<pre><code><span class="title">example</span>.com/search/tv?name=samsung&amp;fromdate=<span class="number">20121010</span></code></pre>
-<h3 id='cookbook/add-guards'>Add guards</h3 id='cookbook/add-guards'>
-<p>Guards are methods that are run before the page navigation takes place and
-that can stop the navigation from displaying a certain page.
-
-</p>
-<p>Use the property <code>guard: someMethod</code> do apply the guard. The method
-takes three parameters: page, route and callback. If the callback is called
-the navigation takes place - otherwise it is stopped.
-
-</p>
-<pre><code>&lt;div <span class="typedef"><span class="keyword">data</span>-bind="page: <span class="container">{<span class="title">id</span>: '<span class="title">admin'</span>, <span class="title">guard</span>: <span class="title">isLoggedIn</span>}</span>"></span>
- <span class="type">This</span> page is only accessible <span class="keyword">if</span> the user is logged <span class="keyword">in</span>.
-&lt;/div></code></pre>
-<p>where
-
-</p>
-<pre><code><span class="label">isLoggedIn:</span> function(toPage, route, callback, fromPage) {
- if(viewModel<span class="preprocessor">.loggedIn</span>()) {
- callback()<span class="comment">;</span>
- } else {
- window<span class="preprocessor">.location</span><span class="preprocessor">.href</span> = <span class="string">"login"</span><span class="comment">;</span>
- }
-}</code></pre>
-<p>Use cases are login, validating steps in state machines, etc.
-
-</p>
-<p>The reason the guard takes a callback as third argument is simply because the guard might be async - accessing
-a webserver for login details or asking if a valid shopping card exists etc.
-
-</p>
-<h3 id='cookbook/add-observables-without-connection-to-the-view-model'>Add observables without connection to the view model</h3 id='cookbook/add-observables-without-connection-to-the-view-model'>
-<p>Sometimes you need observables purely for the visual and they got no connection to the view-model.
-
-</p>
-<p>Using the <code>vars</code> property new observables can be added to the page context.
-
-</p>
-<pre><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: 'user', vars: {lorem: 'ipsum'}}"</span>></span>
- <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">data-bind</span>=<span class="value">"value: lorem"</span>/></span>
- <span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"text: lorem"</span>/></span>
-<span class="tag">&lt;/<span class="title">div</span>></span></code></pre>
-<h3 id='cookbook/deep-loading-content-into-wildcards'>Deep loading content into wildcards</h3 id='cookbook/deep-loading-content-into-wildcards'>
-<p>Using a combination of wildcard pages and sourceOnShow it is possible to deep load content.
-
-</p>
-<pre><code><span class="xml"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-bind</span>=<span class="value">"page: {id: '?', deep: true, sourceOnShow: '{</span><span class="number">1</span><span class="xml">}.html'}><span class="tag">&lt;/<span class="title">div</span>></span>
-
-<span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"#!/some/cool/page"</span>></span>Load some cool page<span class="tag">&lt;/<span class="title">a</span>></span></span></code></pre>
-<p>In the above example <code>some/cool/page</code> will match the wildcard (<code>?</code>) and since <code>deep: true</code> is specified
-the entire route (<code>some/cool/page</code>) will be used when loading content into the page. If <code>deep</code> hadn&#39;t been
-specified the source should have been <code>some.html</code> instead of <code>some/cool/page.html</code>.
-
-</p>
-<h3 id='cookbook/specify-a-start-page'>Specify a start page</h3 id='cookbook/specify-a-start-page'>
-<p>There are two main alternatives to specify a start page, depending on the desired result.
-
-</p>
-<p>Either you can pass an ID (e.g. <code>foo/bar</code>) to your start-method or you can call <code>pager.showChild</code> with a route (
-array of strings).
-
-</p>
-<pre><code>// send user <span class="keyword">to</span> login-page <span class="keyword">and</span> updating the location
-pager.start(<span class="attribute">'login</span>');
-
-// send user <span class="keyword">to</span> login-page without updating the location
-paget.start();
-pager.showChild([<span class="attribute">'login</span>']);</code></pre>
<h2 id='faq'>FAQ</h2 id='faq'>
<h3 id='faq/can-i-use-it-together-with'>Can I use it together with...</h3 id='faq/can-i-use-it-together-with'>
<p>pager.js is not depending on anything but jQuery and KnockoutJS. You can use it together with
@@ -1354,6 +267,8 @@ <h3 id='release-notes/0-7-current-development-revision'>0.7 (Current Development
<li><a href="https://github.com/finnsson/pagerjs/issues/52">Sending wildcards to the viewmodel</a></li>
<li><a href="https://github.com/finnsson/pagerjs/issues/61">Should handle pages that does not react to URL changes</a></li>
<li><a href="https://github.com/finnsson/pagerjs/issues/62">Should handle pages that does not hide on URL changes</a></li>
+<li><a href="https://github.com/finnsson/pagerjs/issues/46">Should handle exceptions in with/withOnShow</a></li>
+<li><a href="https://github.com/finnsson/pagerjs/issues/47">Should handle exceptions on source/sourceOnShow</a></li>
</ul>
<h2 id='roadmap'>Roadmap</h2 id='roadmap'>
<p>Currently working on development version 0.7, towards stable version 0.8.
@@ -1371,7 +286,7 @@ <h2 id='license'>License</h2 id='license'>
<p>pager.js is under MIT license.
</p>
-<p>Copyright (c) 2012 Oscar Finnsson
+<p>Copyright (c) 2013 Oscar Finnsson
</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
View
4 test/should_specify_relative_page_paths_using_page_href.html
@@ -16,10 +16,10 @@
<div data-bind="page: {id: 'start'}">
<!-- This will update href to #start/arne -->
- <a id="arneLink" data-bind="page-hash: 'arne'">Arne</a>
+ <a id="arneLink" data-bind="page-href: 'arne'">Arne</a>
<!-- This will update href to #admin/login -->
- <a id="adminLink" data-bind="page-hash: '../admin/login'">Admin Login</a>
+ <a id="adminLink" data-bind="page-href: '../admin/login'">Admin Login</a>
<div data-bind="page: {id: 'arne'}">Arne!</div>
</div>
View
14 test/should_trigger_navigation_failed.html
@@ -34,7 +34,7 @@
<br/>
<a href="#zoidberg">Zoidberg</a>
-<div data-bind="page: {id: 'first', navigationFailed: failedInFirst}">
+<div data-bind="page: {id: 'first', onNoMatch: failedInFirst}">
First
</div>
@@ -59,7 +59,9 @@
var notFoundB = ko.observable(false);
var viewModel = {
- failedInFirst:function (page, route) {
+ failedInFirst:function (op) {
+ var page = op.page;
+ var route = op.route;
$(page.element).text('Could not find ' + route[0]);
if (route[0] === 'A') {
notFoundA(true);
@@ -74,14 +76,16 @@
ko.applyBindings(viewModel);
pager.startHashChange();
- ko.computed(function() {
- var page = pager.navigationFailed().page;
- var route = pager.navigationFailed().route;
+
+ pager.onNoMatch.add(function(op) {
+ var page = op.page;
+ var route = op.route;
if (page && page.getId() == null) {
viewModel.newChildren.push({childId: route[0]});
page.showPage(route);
}
});
+
</script>
<script type="text/javascript" src="../lib/qunit-until.js"></script>
View
24 test_html5/index.html → test_html5/cache/index.html
@@ -2,18 +2,18 @@
<html>
<head>
<title>Should cache lazy loaded content when sourceCache: true</title>
- <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="../lib/jquery.history.js"></script>
- <script type="text/javascript" src="../lib/underscore-min.js"></script>
- <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script>
- <script type="text/javascript" src="../pager.js"></script>
+ <script type="text/javascript" src="../../lib/jquery-1.7.2.min.js"></script>
+ <script type="text/javascript" src="../../lib/jquery.history.js"></script>
+ <script type="text/javascript" src="../../lib/underscore-min.js"></script>
+ <script type="text/javascript" src="../../lib/knockout-2.1.0.js"></script>
+ <script type="text/javascript" src="../../pager.js"></script>
- <script type="text/javascript" src="../lib/qunit-until.js"></script>
- <script type="text/javascript" src="../lib/qunit.js"></script>
+ <script type="text/javascript" src="../../lib/qunit-until.js"></script>
+ <script type="text/javascript" src="../../lib/qunit.js"></script>
- <link rel="stylesheet" href="../lib/qunit.css"/>
- <base href="http://localhost:3000/test_html5/"/>
+ <link rel="stylesheet" href="../../lib/qunit.css"/>
+ <base href="http://localhost:3000/test_html5/cache/"/>
</head>
<body>
@@ -23,7 +23,7 @@
<a id="arneLink" data-bind="page-href: 'arne'">Arne</a>
<!-- This will update href to admin/login -->
- <a id="adminLink" data-bind="page-href: '../admin/login'">Admin Login</a>
+ <a id="adminLink" data-bind="page-href: '../../admin/login'">Admin Login</a>
<div data-bind="page: {id: 'arne'}">Arne!</div>
</div>
@@ -66,8 +66,8 @@
$(function () {
asyncTest("should work with html5 history api", function () {
- equal($('#arneLink').attr('href'), 'start/arne', "arneLink should be start/arne");
- equal($('#adminLink').attr('href'), 'admin/login', "adminLink should be admin/login");
+ equal($('#arneLink').attr('href'), History.getBaseHref() + 'start/arne', "arneLink should be start/arne");
+ equal($('#adminLink').attr('href'), History.getBaseHref() + 'admin/login', "adminLink should be admin/login");
$('#arneLink').click();
until(function () {

0 comments on commit 0df31fd

Please sign in to comment.