Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updating URLs in doc

  • Loading branch information...
commit 8252c97846544d6fe275d1c725b32c4727868ae2 1 parent 5d92897
@finnsson authored
View
2  README.md
@@ -946,7 +946,7 @@ Fork this repo. Install all dependencies (node.js, grunt, phnatomjs). Run all te
pager.js is under MIT license.
-Copyright (c) 2012 Oscar Finnsson
+Copyright (c) 2013 Oscar Finnsson
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
View
5 pagerjs.com/demo/demo.css
@@ -7,11 +7,6 @@ body > .container > .row > .span9 > div {
font-weight: normal;
background-color: transparent;
border: none;
- cursor: pointer;
-}
-
-.code-large:hover {
- text-decoration: underline;
}
.p {
View
12 pagerjs.com/demo/demo.js
@@ -99,12 +99,18 @@ requirejs(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap', 'hashchange
$(page.element).fadeIn(1000, callback);
},
hideFry:function (page, callback) {
- $(page.element).fadeOut(1000, function () {
- $(page.element).hide();
+ var $e = $(page.element);
+ if (!page.pageHiddenOnce) {
+ page.pageHiddenOnce = true;
+ $e.hide();
+ } else {
+ $e.fadeOut(1000, function () {
+ $e.hide();
+ });
if (callback) {
callback();
}
- });
+ }
},
textLoader:function (page, element) {
var loader = {};
View
12 pagerjs.com/demo/index.html
@@ -62,21 +62,25 @@
<div class="span3" style="padding-top: 20px;">
<ul data-bind="foreach: $__page__.children" class="nav nav-pills nav-stacked">
+ <!-- ko if: ($data.getId() !== '?') -->
<li data-bind="css: {active: isVisible}">
<a class="lead" data-bind="page-href: $data">
<span data-bind="text: val('title')"></span>
</a>
<ul data-bind="foreach: children" class="nav nav-tabs nav-stacked">
+ <!-- ko if: ($data.getId() !== '?') -->
<li data-bind="css: {active: isVisible}">
<a data-bind="page-href: $data">
<span data-bind="text: val('title')"></span>
- <!-- ko if val('desc') -->
+ <!-- ko: if: val('desc') -->
<span class="muted" data-bind="text: val('desc')"></span>
<!-- -->
</a>
</li>
+ <!-- /ko -->
</ul>
</li>
+ <!-- /ko -->
</ul>
</div>
@@ -98,6 +102,7 @@
<div data-bind="page: {id: 'custom_js_when_navigating', title: 'Custom JS when Navigating', desc: 'reacting to navigation', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/custom_js_when_navigating.html'}"></div>
<div data-bind="page: {id: 'failed_navigation', title: 'Failed Navigation', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/failed_navigation.html'}"></div>
<div data-bind="page: {id: 'guards', title: 'Guards', desc: 'conditions when navigating to a page is ok', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/guards.html'}"></div>
+ <div data-bind="page: {id: '?', title: '404 - Single Page Not Found', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/404.html'}"></div>
</div>
<div data-bind="page: {id: 'model', title: 'Model', desc: 'Model'}">
@@ -108,6 +113,7 @@
<div data-bind="page: {id: 'binding_wildcard_to_observable', title: 'Binding Wildcard to observable', sourceOnShow: 'page/binding_wildcard_to_observable.html', scrollToTop: true, sourceCache: true, desc: 'set a name on the ?'}"></div>
<div data-bind="page: {id: 'vars', title: 'Custom observables', sourceOnShow: 'page/vars.html', scrollToTop: true, sourceCache: true, desc: 'pure local view-observables'}"></div>
<div data-bind="page: {id: 'binding_error', title: 'Binding Error', sourceOnShow: 'page/binding_error.html', scrollToTop: true, sourceCache: true, desc: 'trigger event'}"></div>
+ <div data-bind="page: {id: '?', title: '404 - Single Page Not Found', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/404.html'}"></div>
</div>
<div data-bind="page: {id: 'view', title: 'View', desc: 'View'}">
@@ -125,18 +131,22 @@
<div data-bind="page: {id: 'url_toggle_show', title: 'Pages that only toggle on', sourceOnShow: 'page/url_toggle_show.html', scrollToTop: true, sourceCache: true, desc: 'pages that does not automatically hide'}"></div>
<div data-bind="page: {id: 'source_error', title: 'Source Error', sourceOnShow: 'page/source_error.html', scrollToTop: true, sourceCache: true, desc: 'trigger event'}"></div>
<div data-bind="page: {id: 'fx', title: 'FX', sourceOnShow: 'fx.html', scrollToTop: true, sourceCache: true, desc: 'effects between page transitions'}"></div>
+ <div data-bind="page: {id: '?', title: '404 - Single Page Not Found', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/404.html'}"></div>
</div>
<div data-bind="page: {id: 'widgets', title: 'Widgets', desc: 'Widgets'}">
<div data-bind="page: {id: 'tabpanel', title: 'Tab Panel', desc: 'roll your own tab panel', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/tabpanel.html', role: 'start'}"></div>
<div data-bind="page: {id: 'custom_widgets', title: 'Custom Widgets', desc: 'subclassing the page-binding', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/custom_widgets.html'}"></div>
<div data-bind="page: {id: 'custom_navigation_binding', title: 'Custom Navigation Binding', sourceOnShow: 'page/custom_navigation_binding.html', scrollToTop: true, sourceCache: true, desc: 'developing a page-step: binding'}"></div>
+ <div data-bind="page: {id: '?', title: '404 - Single Page Not Found', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/404.html'}"></div>
</div>
<div data-bind="page: {id: 'misc', title: 'Misc', desc: 'Misc'}">
<div data-bind="page: {id: 'crawling', title: 'Crawling', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/crawling.html', desc: 'making sure the site can be crawled', role: 'start'}"></div>
+ <div data-bind="page: {id: '?', title: '404 - Single Page Not Found', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/404.html'}"></div>
</div>
+ <div data-bind="page: {id: '?', title: '404 - Single Page Not Found', scrollToTop: true, sourceCache: true, sourceOnShow: 'page/404.html'}"></div>
</div>
</div>
View
9 pagerjs.com/demo/page/404.html
@@ -0,0 +1,9 @@
+<header class="jumbotron subhead">
+ <h1>404</h1>
+
+ <p class="lead">
+ Single Page Not Found.
+ </p>
+</header>
+
+<iframe width="560" height="315" src="http://www.youtube.com/embed/mpDOscUDQ_0" frameborder="0" allowfullscreen></iframe>
View
610 pagerjs.com/demo/page/api.html
@@ -5,6 +5,7 @@
If this is the first time you visit this documentation it is recommended that
you start <a href="#!/navigation">here</a>.
</p>
+
<p class="lead">
Pager.js contains a lot of functionality and extension-points.
They can be divided into 3 parts:
@@ -14,607 +15,12 @@
</p>
</header>
-<h2><a href="#!/start/pager">pager</a></h2>
-
-<div data-bind="page: {id: 'pager', title: 'pager', scrollToTop: true}">
-
-<h3><code class="code-large">start([id: String])</code></h3>
-
-<p class="p">
- This method will start to listen to hashchange-events. Works only for newer browsers (not IE7).
- <br/>
- This method should be called after <code>ko.applyBindings(...)</code>.
- <br/>
- If an ID is supplied that ID will be set as initial <code>location.hash</code>.
-</p>
-
-<pre class="prettyprint">
-// your view model
-var viewModel = {
-};
-// extend viewModel with a $__page__ that points to pager.page that points to a new Page
-pager.extendWithPage(viewModel);
-// apply your bindings
-ko.applyBindings(viewModel);
-// run this method - listening to hashchange
-pager.start();
- </pre>
-
-
-<h3><code class="code-large">startHashChange([id: String])</code></h3>
-
-<p class="p">
- This method will start to listen to hashchange-events using the jQuery hashchange plugin.
- You'll need to load the hashchange plugin before calling this method.
- <br/>
- This method should be called after <code>ko.applyBindings(...)</code>.
- <br/>
- If an ID is supplied that ID will be set as initial <code>location.hash</code>.
-</p>
-
-<pre class="prettyprint">
-// your view model
-var viewModel = {
-};
-// extend viewModel with a $__page__ that points to pager.page that points to a new Page
-pager.extendWithPage(viewModel);
-// apply your bindings
-ko.applyBindings(viewModel);
-// run this method - listening to hashchange
-pager.startHashChange();
- </pre>
-
-
-<h3><code class="code-large">startHistoryJs([id: String])</code></h3>
-
-<p class="p">
- This method will start to listen to statechange and anchorchange-events using History.js.
- You'll need to load History.js before calling this method.
- <br/>
- This method should be called after <code>ko.applyBindings(...)</code>.
- <br/>
- If an ID is supplied that ID will be set as initial <code>History.pushState</code>.
-</p>
-
-<pre class="prettyprint">
-// your view model
-var viewModel = {
-};
-// extend viewModel with a $__page__ that points to pager.page that points to a new Page
-pager.extendWithPage(viewModel);
-// apply your bindings
-ko.applyBindings(viewModel);
-// run this method - listening to hashchange
-pager.startHistoryJs();
- </pre>
-
-
-
-<h3><code class="code-large">extendWithPage(viewModel : Object)</code></h3>
-
-<p class="p">
- Create a new Page-object and set it on pager (<code>pager.page</code>) as well as the
- viewModel (<code>viewModel.$__page__</code>). This page-object works as the root page.
- <br/>
- You must call this method (or do the identical thing yourself) before calling
- <code>ko.applyBindings(...)</code>
-</p>
-
-<h3><code class="code-large">navigationFailed : Observable({page,route})</code></h3>
-
-<p class="p">
- A global observable that is triggered every time a navigation fails.
- The observable has 2 members: route and page.
-</p>
-
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-ko.computed(function() {
- var page = pager.navigationFailed().page;
- var route = pager.navigationFailed().route;
- if (page && page.getId() == null) {
- viewModel.newChildren.push({childId: route[0]});
- page.showPage(route);
- }
-});
- </pre>
-
-<h3><code class="code-large">onBindingError : $.Callbacks</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/binding_error">Binding Error</a>
-</div>
-
-<h3><code class="code-large">onSourceError : $.Callbacks</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/source_error">Source Error</a>
-</div>
-
-
-<h3><code class="code-large">showChild(route : String[])</code></h3>
-
-<p class="p">
- Will trigger <code>pager.page.childManager.showChild</code>, i.e. route
- to the correct pages. You should call this method if you are using your own
- event listener for user navigation (e.g. History.js)
- or in some other way need to call the routing.
-</p>
-
-<h3><code class="code-large">page : pager.Page</code></h3>
-
-<p class="p">
- The root page. Got no ID. Using this reference (or <code>$__page__</code> in the view model)
- it is possible to e.g. get a hold of all the pages on the site using <code>pager.page.children()</code>
-</p>
-
-<h3><code class="code-large">useHTML5history: Boolean</code></h3>
-
-<p class="p">
- Default to <code>false</code>. If set to <code>true</code> the custom binding <code>page-href</code>
- will use the custom binding <code>page-href5</code>, thus giving true URLs instead of
- hash bangs. If History.js is used (by setting <code>pager.Href5.history = History</code> after loading
- History.js) a fallback solution with hash bangs will be used for older browsers.
-</p>
-
-<h3><code class="code-large">getParentPage(BindingContext) : Observable(Page)</code> </h3>
-
-<p class="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 data-bind="prettyprint: {}" class="prettyprint linenums">
-ko.bindingHandlers['lorem-ipsum'] = {
- init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
- // get the Page-instance that this element resides in
- var page = pager.getParentPage(bindingContext);
- // bind the text of the element to the page title
- ko.applyBindingsToNode(element, {
- text: page.val('title')
- });
- }
-};
-</pre>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_navigation_binding">Custom Navigation Binding</a>
-</div>
-
-
-<h3><code class="code-large">Href.hash: String</code></h3>
-
-<p class="p">
- Defaults to <code>#</code>. Can be set to <code>#!/</code> if google style hash bangs are preferred.
-</p>
-
-<h3><code class="code-large">Href5.history: Object</code></h3>
-
-<p class="p">
- Defaults to <code>window.history</code>. Can be set to <code>History</code> if
- History.js is loaded. This object will be used by <code>page-href</code> and <code>page-href5</code>
- when <code>useHTML5history === true</code>.
-</p>
-
-</div>
-<h2><a href="#!/start/config">page: {}</a></h2>
-
-<div data-bind="page: {id: 'config', title: 'Config', scrollToTop: true}">
-
-<h3><code class="code-large" id="recapitulation/page/id">id : String</code></h3>
-
-<p>
- The ID of the page. It can be either a normal name or <i>?</i>. <i>?</i> means that it matches
- against any route. The <i>?</i>-ID is useful for automatically matching against a large set of
- structured values.
-</p>
-
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-&lt;div data-bind="page: {id: 'search'}"&gt;
- &lt;!-- Search for product here. Will only match #search --&gt;
-&lt;/div&gt;
-&lt;div data-bind="page: {id: 'product'}"&gt;
- &lt;!-- List all products here. Will only match #product --&gt;
- &lt;div data-bind="page: {id: '?', withOnShow: loadProduct}"&gt;
- &lt;!-- This is a page for any product since the ID is ?. Will match any #product/.* --&gt;
- &lt;span data-bind="text: productName"&gt;&lt;/span&gt;
- &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/setup">Setup</a>
- <a class="btn btn-primary" href="#!/deep_navigation">Deep Navigation</a>
- <a class="btn btn-primary" href="#!/matching_wildcards">Matching Wildcards</a>
- <a class="btn btn-primary" href="#!/deep_navigation_with_wildcards">Deep Navigation with Wildcards</a>
-</div>
-
-<h3><code class="code-large">params : String[]</code></h3>
-
-<p>
- A list of URL parameters (of URL-like parameters in the fragment ID)
- that should be bound to the view-model of the page. If you specify <code>params: ['age']</code>
- and the parameters for the current page got an age-parameter the value of that parameter
- will appear inside the view-model.
-</p>
-
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-&lt;div data-bind="page: {id: 'search', params: ['name', 'price']}"&gt;
- &lt;label&gt;Name &lt;input type="text" data-bind="value: name"&gt;&lt;/span&gt;&lt;/label&gt;
- &lt;label&gt;Price &lt;input type="text" data-bind="value: price"&gt;&lt;/span&gt;&lt;/label&gt;
-&lt;/div&gt;
-</pre>
-
-<p>
- and the user surfs to <code>/search?name=TV&price=200</code> the user will see
-</p>
-
-<form>
- <label>Name <input type="text" value="TV"></span></label>
- <label>Price <input type="text" value="200"></span></label>
-</form>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/params">Binding URI parameters</a>
- <a class="btn btn-primary" href="#!/binding_params_object">Parameters as objects</a>
-</div>
-
-<h3><code class="code-large"><a href="https://github.com/GilesBradshaw" data-bind="tooltip: {}" title="Thanks to Giles Bradshaw">nameParam</a>: String/Observable</code> </h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/binding_wildcard_to_observable">Binding Wildcard to observable</a>
-</div>
-
-<h3><code class="code-large">vars: Object</code> </h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/vars">Custom observables in the view</a>
-</div>
-
-
-<h3><code class="code-large">with : Object</code></h3>
-
-<p>
- Works as the normal <code>with</code>-binding.
-</p>
-
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-&lt;div data-bind="page: {id: 'fry', with: fry}"&gt;
- The age of Fry is &lt;span data-bind="text: age"&gt;&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-<p>where</p>
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-var viewModel = {
- fry: ko.observable({age: ko.observable(27)})
-}
-</pre>
-
-<div class="alert">
- This member should also be possible to supply a method as <code>withOnShow</code>, i.e. should be possible
- to be either an object or a method.
-</div>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/change_binding_context">Change Binding Context</a>
-</div>
-
-
-<h3><code class="code-large">withOnShow : Function(Function(Object), <a class="tt" title="Thanks to Shildrak"
- href="https://github.com/Shildrak">Page</a>)</code>
-</h3>
-
-<p>
- This member makes it possible to lazy-bind a view-model once the page is first displayed. <code>withOnShow</code>
- takes a method that should take 2 arguments: a callback (that should be feeded the view-model)
- and the current Page-object.
-</p>
-<p>
- This property is very useful when you want to split up your view-model for your single page application
- into multiple smaller view-models that can still communicate with each other. You might feed a page
- a view-model for a certain item.
-</p>
-<p>
- If you set <code>sourceCache: true</code> the view-model will not reload every time you revisit the page.
-</p>
-
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-&lt;div data-bind="page: {id: '?', withOnShow: Cool.loadUser}"&gt;
- &lt;h1 data-bind="text: userName"&gt;&lt;/h1&gt;
-&lt;/div&gt;
-</pre>
-
-<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-Cool.loadUser = function(callback, page) {
- $.get('service/users/' + page.currentId, function(data) {
- callback(ko.mapping.fromJSON(data));
- });
-};
-</pre>
-
-<div class="alert">
- This member should also be possible to supply an object as <code>with</code>, i.e. should be possible
- to be either an object or a method.
-</div>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/lazy_bind_view_model">Lazy-Bind View-Model</a>
-</div>
-
-
-<h3><code class="code-large">source : String / Function(Page, Function())</code></h3>
-
-<p>
- Load content into the page from an external source.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/load_external_content">Load External Content</a>
- <a class="btn btn-primary" href="#!/custom_view_loader">Load View using Custom Method</a>
-</div>
-
-<h3><code class="code-large">sourceOnShow : Function(Page, Function())</code></h3>
-<p>
- While <code>source</code> loads the content into the page directly the configuration <code>sourceOnShow</code>
- loads the content into the page when the page is first requested.
- This configuration can be further controlled using <code>sourceCache</code>.
-</p>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/lazy_load_external_content">Lazy-Load External Content</a>
- <a class="btn btn-primary" href="#!/custom_view_loader">Load View using Custom Method</a>
-</div>
-
-<h3><code class="code-large">sourceLoaded : Function(Page)</code></h3>
-<p>
- Register a callback whenever an external source (<code>source</code> or <code>sourceOnShow</code>)
- is loaded into the page. Useful for e.g. post-processing.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/load_external_content">Load External Content</a>
-</div>
-
-
-<h3><code class="code-large">sourceCache : Boolean / Number</code></h3>
-<p>
- sourceCache will control both the caching of the lazy-loaded source and the lazy-loaded view-model.
-</p>
-<p>
- If not set (or false) the lazy-loaded model (<code>withOnShow</code>) and view (<code>withOnShow</code>) will be
- requested
- every time the page is displayed.
-</p>
-<p>
- If set to true both the lazy-loaded model and view are cached.
-</p>
-<p>
- If set to a number the lazy-loaded view is cached that amount of time in seconds.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/cached_lazy">Cached Lazy-Loaded Content</a>
-</div>
-
-<h3><code class="code-large">frame : String</code></h3>
-<p>
- By specifying <code>frame: 'iframe'</code> the external source is loaded into an iframe instead.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/load_into_iframe">Load Content into iframe</a>
- <a class="btn btn-primary" href="#!/configure_iframe">Configure an iframe</a>
-</div>
-
-<h3><code class="code-large">modal : Boolean</code></h3>
-
-<p>
- If a page is configured as <code>modal: true</code> it can appear in child-pages of sibling-pages
- to the modal page.
-</p>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/modals">Modals</a>
-</div>
-
-
-<h3><code class="code-large">beforeHide : Function(Page)</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_js_when_navigating">Custom JS when Navigating</a>
-</div>
-
-
-<h3><code class="code-large">beforeShow : Function(Page)</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_js_when_navigating">Custom JS when Navigating</a>
-</div>
-
-<h3><code class="code-large">afterHide : Function(Page)</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_js_when_navigating">Custom JS when Navigating</a>
-</div>
-
-<h3><code class="code-large">afterShow : Function(Page)</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_js_when_navigating">Custom JS when Navigating</a>
-</div>
-
-<h3><code class="code-large">hideElement : Function(Page,Function())</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_hide_show">Custom Hide- and Show-Methods</a>
-</div>
-
-
-<h3><code class="code-large">showElement : Function(Page)</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_hide_show">Custom Hide- and Show-Methods</a>
-</div>
-
-<h3><code class="code-large">fx : String</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/fx">FX</a>
-</div>
-
-
-<h3><code class="code-large">loader : Function(Page,Node)</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/loader">Loader</a>
-</div>
-
-
-<h3><code class="code-large">navigationFailed : Observable({page:Page,route:String[])</code></h3>
-
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/failed_navigation">Reacting to Failed Navigation</a>
-</div>
-
-<h3><code class="code-large">onBindingError : Function({page:Page,url:String,xhrPromise:$.Promise})</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/binding_error">Binding Error</a>
-</div>
-
-<h3><code class="code-large">onSourceError : Function({page:Page,url:String,xhrPromise:$.Promise})</code></h3>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/source_error">Source Error</a>
-</div>
-
-
-<h3><code class="code-large">guard : Function(Page,String[],Function(),Page)</code></h3>
-<p>
- The first argument is the page being navigated to,
- the second argument is the route,
- the third argument is a callback
- and the fourth argument is the page being navigated from.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/guards">Guards</a>
-</div>
-
-
-
-<h3><code class="code-large">urlToggle :String</code></h3>
-<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>.
-
- <code>null</code> is the normal behaviour.
-
- <code>show</code> makes the page show when the route is matching, but wont automatically hide.
-
- <code>none</code> means that the page does not react to the route. You'll need to control the visibility of the page
- in some other way. Pages with <code>urlToggle: 'none'</code> will be visible by default.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/url_toggle_show">Pages that only toggle on</a>
-</div>
-
-<h3><code class="code-large">title : String</code></h3>
-<p>
- Controls the page title if set.
-</p>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/start">Show start page by default</a>
-</div>
-
-</div>
-
-<h2><a href="#!/start/page">pager.Page</a></h2>
-
-<div data-bind="page: {id: 'page', title: 'Page', scrollToTop: true}">
-
-<h3><code class="code-large">element : Node</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_widgets">Custom Widgets</a>
- <a class="btn btn-primary" href="#!/custom_hide_show">Custom Show- and Hide-Methods</a>
- <a class="btn btn-primary" href="#!/loader">Loaders</a>
-</div>
-
-<h3><code class="code-large">viewModel : Observable/Object</code></h3>
-<p>
- The view-model of the page.
-</p>
-
-<h3><code class="code-large">children : ObservableArray(Page[])</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/tabpanel">Tab Panel</a>
-</div>
-
-<h3><code class="code-large">child(String) : Observable(Page)</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/url_toggle_show">Pages that only toggle on</a>
-</div>
-
-
-<h3><code class="code-large">parentPage : Page</code></h3>
-<p>
- The parent page, or null if the page is the root page (<i>pages.page</i>).
-</p>
-
-<h3><code class="code-large">currentParentPage : Observable(Page)</code></h3>
-<p>
- The current parent page. Normally it is the same as <code>parentPage</code>
- but for modal pages it change change.
-</p>
-
-<h3><code class="code-large">currentChildPage : Observable(Page)</code></h3>
-
-<p>
- The currently visible child-page of the page. Observe that the current child page
- does not need to be in the collection <code>children</code> since the current child page
- can be a modal page!
-</p>
-
-<h3><code class="code-large">currentId : Observable(String)</code></h3>
-<p>
- Get the current ID of the page. You should normally call this method instead of <code>getId</code>
- since the current ID can change for wildcard-pages (<i>?</i>).
-</p>
-
-<h3><code class="code-large">isVisible : Observable(Boolean)</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/tabpanel">Tab Panel</a>
-</div>
-
-<h3><code class="code-large">val(String) : Object</code></h3>
-<p>
- Get an un-boxed configuration property from <code>valueAccessor</code> by the key specified.
- If you want to get hold of e.g. the configuration property <code>beforeHide</code> you should
- call <code>somePage.val('beforeHide')</code> instead of <code>somePage.valueAccessor.beforeHide</code>
- since both <code>valueAccessor</code> and <code>beforeHide</code> can be observables!
- <br/>
- All the possible keys for the configuration object can be accessed using <code>val</code>
- (e.g. title, params, with, withOnShow).
-</p>
-
-
-<h3><code class="code-large">getId() : String</code></h3>
-
-<p>
- The ID of the page. You should normally call <code>currentId</code> instead since the
- ID can change for wildcard pages.
-</p>
-
-<h3><code class="code-large">init() : {controlsDescendantBindings:true}</code></h3>
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_widgets">Custom Widgets</a>
-</div>
-
-<h3><code class="code-large">getFullRoute() : [String]</code></h3>
-
-<p>
- Returns the full route of the page.
-</p>
-
-<div class="form-actions">
- <a class="btn btn-primary" href="#!/custom_navigation_binding">Custom Navigation Binding</a>
-</div>
+<ul class="nav nav-tabs" data-bind="foreach: $page.children">
+ <li data-bind="css: {active: isVisible}"><a
+ data-bind="text: $data.val('title'), page-href: $data"></a></li>
+</ul>
-<h3><code class="code-large">nullObject : pager.Page</code></h3>
+<div data-bind="page: {id: 'pager', title: 'pager', sourceCache: true, sourceOnShow: 'page/api_pager.html'}"></div>
+<div data-bind="page: {id: 'config', title: 'config', sourceCache: true, sourceOnShow: 'page/api_config.html'}"></div>
+<div data-bind="page: {id: 'page', title: 'Page', sourceCache: true, sourceOnShow: 'page/api_page.html'}"></div>
-<p>
- Is a null-object of <code>pager.Page</code>. It is useful in computed observables
- as a temporary Page-instance before the correct Page-instance is loaded or parsed.
-</p>
-</div>
View
324 pagerjs.com/demo/page/api_config.html
@@ -0,0 +1,324 @@
+<header class="jumbotron subhead">
+ <p class="lead">
+ This is the config properties you can specify inside <code>data-bind="page: {...}"</code>.
+ </p>
+</header>
+
+<h3><code class="code-large" id="recapitulation/page/id">id : String</code></h3>
+
+<p>
+ The ID of the page. It can be either a normal name or <i>?</i>. <i>?</i> means that it matches
+ against any route. The <i>?</i>-ID is useful for automatically matching against a large set of
+ structured values.
+</p>
+
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+&lt;div data-bind="page: {id: 'search'}"&gt;
+ &lt;!-- Search for product here. Will only match #search --&gt;
+&lt;/div&gt;
+&lt;div data-bind="page: {id: 'product'}"&gt;
+ &lt;!-- List all products here. Will only match #product --&gt;
+ &lt;div data-bind="page: {id: '?', withOnShow: loadProduct}"&gt;
+ &lt;!-- This is a page for any product since the ID is ?. Will match any #product/.* --&gt;
+ &lt;span data-bind="text: productName"&gt;&lt;/span&gt;
+ &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/setup">Setup</a>
+ <a class="btn btn-primary" href="#!/navigation/deep_navigation">Deep Navigation</a>
+ <a class="btn btn-primary" href="#!/navigation/matching_wildcards">Matching Wildcards</a>
+ <a class="btn btn-primary" href="#!/navigation/deep_navigation_with_wildcards">Deep Navigation with Wildcards</a>
+</div>
+
+<h3><code class="code-large">params : String[]</code></h3>
+
+<p>
+ A list of URL parameters (of URL-like parameters in the fragment ID)
+ that should be bound to the view-model of the page. If you specify <code>params: ['age']</code>
+ and the parameters for the current page got an age-parameter the value of that parameter
+ will appear inside the view-model.
+</p>
+
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+&lt;div data-bind="page: {id: 'search', params: ['name', 'price']}"&gt;
+ &lt;label&gt;Name &lt;input type="text" data-bind="value: name"&gt;&lt;/span&gt;&lt;/label&gt;
+ &lt;label&gt;Price &lt;input type="text" data-bind="value: price"&gt;&lt;/span&gt;&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+
+<p>
+ and the user surfs to <code>/search?name=TV&price=200</code> the user will see
+</p>
+
+<form>
+ <label>Name <input type="text" value="TV"></span></label>
+ <label>Price <input type="text" value="200"></span></label>
+</form>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/params">Binding URI parameters</a>
+ <a class="btn btn-primary" href="#!/model/binding_params_object">Parameters as objects</a>
+</div>
+
+<h3><code class="code-large"><a href="https://github.com/GilesBradshaw" data-bind="tooltip: {}"
+ title="Thanks to Giles Bradshaw">nameParam</a>: String/Observable</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/binding_wildcard_to_observable">Binding Wildcard to observable</a>
+</div>
+
+<h3><code class="code-large">vars: Object</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/vars">Custom observables in the view</a>
+</div>
+
+
+<h3><code class="code-large">with : Object</code></h3>
+
+<p>
+ Works as the normal <code>with</code>-binding.
+</p>
+
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+&lt;div data-bind="page: {id: 'fry', with: fry}"&gt;
+ The age of Fry is &lt;span data-bind="text: age"&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+<p>where</p>
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+var viewModel = {
+ fry: ko.observable({age: ko.observable(27)})
+}
+</pre>
+
+<div class="alert">
+ This member should also be possible to supply a method as <code>withOnShow</code>, i.e. should be possible
+ to be either an object or a method.
+</div>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/change_binding_context">Change Binding Context</a>
+</div>
+
+
+<h3><code class="code-large">withOnShow : Function(Function(Object), <a class="tt" title="Thanks to Shildrak"
+ href="https://github.com/Shildrak">Page</a>)</code>
+</h3>
+
+<p>
+ This member makes it possible to lazy-bind a view-model once the page is first displayed. <code>withOnShow</code>
+ takes a method that should take 2 arguments: a callback (that should be feeded the view-model)
+ and the current Page-object.
+</p>
+<p>
+ This property is very useful when you want to split up your view-model for your single page application
+ into multiple smaller view-models that can still communicate with each other. You might feed a page
+ a view-model for a certain item.
+</p>
+<p>
+ If you set <code>sourceCache: true</code> the view-model will not reload every time you revisit the page.
+</p>
+
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+&lt;div data-bind="page: {id: '?', withOnShow: Cool.loadUser}"&gt;
+ &lt;h1 data-bind="text: userName"&gt;&lt;/h1&gt;
+&lt;/div&gt;
+</pre>
+
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+Cool.loadUser = function(callback, page) {
+ $.get('service/users/' + page.currentId, function(data) {
+ callback(ko.mapping.fromJSON(data));
+ });
+};
+</pre>
+
+<div class="alert">
+ This member should also be possible to supply an object as <code>with</code>, i.e. should be possible
+ to be either an object or a method.
+</div>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/lazy_bind_view_model">Lazy-Bind View-Model</a>
+</div>
+
+
+<h3><code class="code-large">source : String / Function(Page, Function())</code></h3>
+
+<p>
+ Load content into the page from an external source.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/load_external_content">Load External Content</a>
+ <a class="btn btn-primary" href="#!/view/custom_view_loader">Load View using Custom Method</a>
+</div>
+
+<h3><code class="code-large">sourceOnShow : Function(Page, Function())</code></h3>
+<p>
+ While <code>source</code> loads the content into the page directly the configuration <code>sourceOnShow</code>
+ loads the content into the page when the page is first requested.
+ This configuration can be further controlled using <code>sourceCache</code>.
+</p>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/lazy_load_external_content">Lazy-Load External Content</a>
+ <a class="btn btn-primary" href="#!/view/custom_view_loader">Load View using Custom Method</a>
+</div>
+
+<h3><code class="code-large">sourceLoaded : Function(Page)</code></h3>
+<p>
+ Register a callback whenever an external source (<code>source</code> or <code>sourceOnShow</code>)
+ is loaded into the page. Useful for e.g. post-processing.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/load_external_content">Load External Content</a>
+</div>
+
+
+<h3><code class="code-large">sourceCache : Boolean / Number</code></h3>
+<p>
+ sourceCache will control both the caching of the lazy-loaded source and the lazy-loaded view-model.
+</p>
+<p>
+ If not set (or false) the lazy-loaded model (<code>withOnShow</code>) and view (<code>withOnShow</code>) will be
+ requested
+ every time the page is displayed.
+</p>
+<p>
+ If set to true both the lazy-loaded model and view are cached.
+</p>
+<p>
+ If set to a number the lazy-loaded view is cached that amount of time in seconds.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/cached_lazy">Cached Lazy-Loaded Content</a>
+</div>
+
+<h3><code class="code-large">frame : String</code></h3>
+<p>
+ By specifying <code>frame: 'iframe'</code> the external source is loaded into an iframe instead.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/load_into_iframe">Load Content into iframe</a>
+ <a class="btn btn-primary" href="#!/view/configure_iframe">Configure an iframe</a>
+</div>
+
+<h3><code class="code-large">modal : Boolean</code></h3>
+
+<p>
+ If a page is configured as <code>modal: true</code> it can appear in child-pages of sibling-pages
+ to the modal page.
+</p>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/modals">Modals</a>
+</div>
+
+
+<h3><code class="code-large">beforeHide : Function(Page)</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/custom_js_when_navigating">Custom JS when Navigating</a>
+</div>
+
+
+<h3><code class="code-large">beforeShow : Function(Page)</code></h3>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/custom_js_when_navigating">Custom JS when Navigating</a>
+</div>
+
+<h3><code class="code-large">afterHide : Function(Page)</code></h3>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/custom_js_when_navigating">Custom JS when Navigating</a>
+</div>
+
+<h3><code class="code-large">afterShow : Function(Page)</code></h3>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/custom_js_when_navigating">Custom JS when Navigating</a>
+</div>
+
+<h3><code class="code-large">hideElement : Function(Page,Function())</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/custom_hide_show">Custom Hide- and Show-Methods</a>
+</div>
+
+
+<h3><code class="code-large">showElement : Function(Page)</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/custom_hide_show">Custom Hide- and Show-Methods</a>
+</div>
+
+<h3><code class="code-large">fx : String</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/fx">FX</a>
+</div>
+
+
+<h3><code class="code-large">loader : Function(Page,Node)</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/loader">Loader</a>
+</div>
+
+
+<h3><code class="code-large">navigationFailed : Observable({page:Page,route:String[])</code></h3>
+
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/failed_navigation">Reacting to Failed Navigation</a>
+</div>
+
+<h3><code class="code-large">onBindingError : Function({page:Page,url:String,xhrPromise:$.Promise})</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/binding_error">Binding Error</a>
+</div>
+
+<h3><code class="code-large">onSourceError : Function({page:Page,url:String,xhrPromise:$.Promise})</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/source_error">Source Error</a>
+</div>
+
+
+<h3><code class="code-large">guard : Function(Page,String[],Function(),Page)</code></h3>
+<p>
+ The first argument is the page being navigated to,
+ the second argument is the route,
+ the third argument is a callback
+ and the fourth argument is the page being navigated from.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/guards">Guards</a>
+</div>
+
+
+<h3><code class="code-large">urlToggle :String</code></h3>
+<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>.
+
+ <code>null</code> is the normal behaviour.
+
+ <code>show</code> makes the page show when the route is matching, but wont automatically hide.
+
+ <code>none</code> means that the page does not react to the route. You'll need to control the visibility of the page
+ in some other way. Pages with <code>urlToggle: 'none'</code> will be visible by default.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/url_toggle_show">Pages that only toggle on</a>
+</div>
+
+<h3><code class="code-large">title : String</code></h3>
+<p>
+ Controls the page title if set.
+</p>
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/navigation/start">Show start page by default</a>
+</div>
View
103 pagerjs.com/demo/page/api_page.html
@@ -0,0 +1,103 @@
+<h3><code class="code-large">element : Node</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/widgets/custom_widgets">Custom Widgets</a>
+ <a class="btn btn-primary" href="#!/view/custom_hide_show">Custom Show- and Hide-Methods</a>
+ <a class="btn btn-primary" href="#!/view/loader">Loaders</a>
+</div>
+
+<h3><code class="code-large">viewModel : Observable/Object</code></h3>
+
+<p>
+ The view-model of the page.
+</p>
+
+<h3><code class="code-large">children : ObservableArray(Page[])</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/widgets/tabpanel">Tab Panel</a>
+</div>
+
+<h3><code class="code-large">child(String) : Observable(Page)</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/url_toggle_show">Pages that only toggle on</a>
+</div>
+
+
+<h3><code class="code-large">parentPage : Page</code></h3>
+
+<p>
+ The parent page, or null if the page is the root page (<i>pages.page</i>).
+</p>
+
+<h3><code class="code-large">currentParentPage : Observable(Page)</code></h3>
+
+<p>
+ The current parent page. Normally it is the same as <code>parentPage</code>
+ but for modal pages it change change.
+</p>
+
+<h3><code class="code-large">currentChildPage : Observable(Page)</code></h3>
+
+<p>
+ The currently visible child-page of the page. Observe that the current child page
+ does not need to be in the collection <code>children</code> since the current child page
+ can be a modal page!
+</p>
+
+<h3><code class="code-large">currentId : Observable(String)</code></h3>
+
+<p>
+ Get the current ID of the page. You should normally call this method instead of <code>getId</code>
+ since the current ID can change for wildcard-pages (<i>?</i>).
+</p>
+
+<h3><code class="code-large">isVisible : Observable(Boolean)</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/widgets/tabpanel">Tab Panel</a>
+</div>
+
+<h3><code class="code-large">val(String) : Object</code></h3>
+
+<p>
+ Get an un-boxed configuration property from <code>valueAccessor</code> by the key specified.
+ If you want to get hold of e.g. the configuration property <code>beforeHide</code> you should
+ call <code>somePage.val('beforeHide')</code> instead of <code>somePage.valueAccessor.beforeHide</code>
+ since both <code>valueAccessor</code> and <code>beforeHide</code> can be observables!
+ <br/>
+ All the possible keys for the configuration object can be accessed using <code>val</code>
+ (e.g. title, params, with, withOnShow).
+</p>
+
+
+<h3><code class="code-large">getId() : String</code></h3>
+
+<p>
+ The ID of the page. You should normally call <code>currentId</code> instead since the
+ ID can change for wildcard pages.
+</p>
+
+<h3><code class="code-large">init() : {controlsDescendantBindings:true}</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/widgets/custom_widgets">Custom Widgets</a>
+</div>
+
+<h3><code class="code-large">getFullRoute() : [String]</code></h3>
+
+<p>
+ Returns the full route of the page.
+</p>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/widgets/custom_navigation_binding">Custom Navigation Binding</a>
+</div>
+
+<h3><code class="code-large">nullObject : pager.Page</code></h3>
+
+<p>
+ Is a null-object of <code>pager.Page</code>. It is useful in computed observables
+ as a temporary Page-instance before the correct Page-instance is loaded or parsed.
+</p>
View
177 pagerjs.com/demo/page/api_pager.html
@@ -0,0 +1,177 @@
+<h3><code class="code-large">start([id: String])</code></h3>
+
+<p class="p">
+ This method will start to listen to hashchange-events. Works only for newer browsers (not IE7).
+ <br/>
+ This method should be called after <code>ko.applyBindings(...)</code>.
+ <br/>
+ If an ID is supplied that ID will be set as initial <code>location.hash</code>.
+</p>
+
+<pre class="prettyprint">
+// your view model
+var viewModel = {
+};
+// extend viewModel with a $__page__ that points to pager.page that points to a new Page
+pager.extendWithPage(viewModel);
+// apply your bindings
+ko.applyBindings(viewModel);
+// run this method - listening to hashchange
+pager.start();
+ </pre>
+
+
+<h3><code class="code-large">startHashChange([id: String])</code></h3>
+
+<p class="p">
+ This method will start to listen to hashchange-events using the jQuery hashchange plugin.
+ You'll need to load the hashchange plugin before calling this method.
+ <br/>
+ This method should be called after <code>ko.applyBindings(...)</code>.
+ <br/>
+ If an ID is supplied that ID will be set as initial <code>location.hash</code>.
+</p>
+
+<pre class="prettyprint">
+// your view model
+var viewModel = {
+};
+// extend viewModel with a $__page__ that points to pager.page that points to a new Page
+pager.extendWithPage(viewModel);
+// apply your bindings
+ko.applyBindings(viewModel);
+// run this method - listening to hashchange
+pager.startHashChange();
+ </pre>
+
+
+<h3><code class="code-large">startHistoryJs([id: String])</code></h3>
+
+<p class="p">
+ This method will start to listen to statechange and anchorchange-events using History.js.
+ You'll need to load History.js before calling this method.
+ <br/>
+ This method should be called after <code>ko.applyBindings(...)</code>.
+ <br/>
+ If an ID is supplied that ID will be set as initial <code>History.pushState</code>.
+</p>
+
+<pre class="prettyprint">
+// your view model
+var viewModel = {
+};
+// extend viewModel with a $__page__ that points to pager.page that points to a new Page
+pager.extendWithPage(viewModel);
+// apply your bindings
+ko.applyBindings(viewModel);
+// run this method - listening to hashchange
+pager.startHistoryJs();
+ </pre>
+
+
+
+<h3><code class="code-large">extendWithPage(viewModel : Object)</code></h3>
+
+<p class="p">
+ Create a new Page-object and set it on pager (<code>pager.page</code>) as well as the
+ viewModel (<code>viewModel.$__page__</code>). This page-object works as the root page.
+ <br/>
+ You must call this method (or do the identical thing yourself) before calling
+ <code>ko.applyBindings(...)</code>
+</p>
+
+<h3><code class="code-large">navigationFailed : Observable({page,route})</code></h3>
+
+<p class="p">
+ A global observable that is triggered every time a navigation fails.
+ The observable has 2 members: route and page.
+</p>
+
+<pre data-bind="prettyprint: {}" class="prettyprint linenums">
+ko.computed(function() {
+ var page = pager.navigationFailed().page;
+ var route = pager.navigationFailed().route;
+ if (page && page.getId() == null) {
+ viewModel.newChildren.push({childId: route[0]});
+ page.showPage(route);
+ }
+});
+ </pre>
+
+<h3><code class="code-large">onBindingError : $.Callbacks</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/model/binding_error">Binding Error</a>
+</div>
+
+<h3><code class="code-large">onSourceError : $.Callbacks</code></h3>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/view/source_error">Source Error</a>
+</div>
+
+
+<h3><code class="code-large">showChild(route : String[])</code></h3>
+
+<p class="p">
+ Will trigger <code>pager.page.childManager.showChild</code>, i.e. route
+ to the correct pages. You should call this method if you are using your own
+ event listener for user navigation (e.g. History.js)
+ or in some other way need to call the routing.
+</p>
+
+<h3><code class="code-large">page : pager.Page</code></h3>
+
+<p class="p">
+ The root page. Got no ID. Using this reference (or <code>$__page__</code> in the view model)
+ it is possible to e.g. get a hold of all the pages on the site using <code>pager.page.children()</code>
+</p>
+
+<h3><code class="code-large">useHTML5history: Boolean</code></h3>
+
+<p class="p">
+ Default to <code>false</code>. If set to <code>true</code> the custom binding <code>page-href</code>
+ will use the custom binding <code>page-href5</code>, thus giving true URLs instead of
+ hash bangs. If History.js is used (by setting <code>pager.Href5.history = History</code> after loading
+ History.js) a fallback solution with hash bangs will be used for older browsers.
+</p>
+
+<h3><code class="code-large">getParentPage(BindingContext) : Observable(Page)</code> </h3>
+
+<p class="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 data-bind="prettyprint: {}" class="prettyprint linenums">
+ko.bindingHandlers['lorem-ipsum'] = {
+ init:function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+ // get the Page-instance that this element resides in
+ var page = pager.getParentPage(bindingContext);
+ // bind the text of the element to the page title
+ ko.applyBindingsToNode(element, {
+ text: page.val('title')
+ });
+ }
+};
+</pre>
+
+<div class="form-actions">
+ <a class="btn btn-primary" href="#!/widgets/custom_navigation_binding">Custom Navigation Binding</a>
+</div>
+
+
+<h3><code class="code-large">Href.hash: String</code></h3>
+
+<p class="p">
+ Defaults to <code>#</code>. Can be set to <code>#!/</code> if google style hash bangs are preferred.
+</p>
+
+<h3><code class="code-large">Href5.history: Object</code></h3>
+
+<p class="p">
+ Defaults to <code>window.history</code>. Can be set to <code>History</code> if
+ History.js is loaded. This object will be used by <code>page-href</code> and <code>page-href5</code>
+ when <code>useHTML5history === true</code>.
+</p>
+
+</div>
View
16 pagerjs.com/demo/page/async.html
@@ -3,26 +3,10 @@
<p class="lead">
The web is
-
-
- If you got a reference to a page-instance you can bind a <code>href</code> to
- its path directly. Use supply the <code>page-href</code> binding the
- page instance and the binding will calculate the correct path to the page.
- <br/>
- This is useful when iterating over a collection of pages (see the menu on the top).
</p>
</header>
<pre data-bind="prettyprint: {}" class="prettyprint linenums">
-&lt;ul data-bind="foreach: $__page__.children" class="dropdown-menu" role="menu"
- aria-labelledby="dropdownMenu"&gt;
- &lt;li data-bind="css: {<a data-bind="tooltip: {}" title="add the class active if the page is visible">active: isVisible</a>}"&gt;
- &lt;a data-bind="text: val('title'), <a data-bind="tooltip: {}" title="$data is a Page-instance">page-href: $data</a>"&gt;&lt;/a&gt;
- &lt;/li&gt;
-&lt;/ul&gt;
</pre>
-<div class="form-actions">
- <a class="btn btn-large btn-primary" href="#!/html5_history">What about HTML5 history?</a>
-</div>
View
12 pagerjs.com/demo/page/custom_hide_show.html
@@ -31,12 +31,18 @@
$(page.element).fadeIn(1000, callback);
};
hideFry:function (page, callback) {
- $(page.element).fadeOut(1000, function () {
- $(page.element).hide();
+ var $e = $(page.element);
+ if (!page.pageHiddenOnce) {
+ page.pageHiddenOnce = true;
+ $e.hide();
+ } else {
+ $e.fadeOut(1000, function () {
+ $e.hide();
+ });
if (callback) {
callback();
}
- });
+ }
};
</pre>
View
32 test/should_allow_params_in_href.html
@@ -14,23 +14,37 @@
<div id="qunit"></div>
-<a id="click" data-bind="page-href: {path: 'first', params: {nam: 'foobar', ans: 42}}">click me</a>
+<div id="a">
-<div data-bind="page: {id: 'first', params: ['nam','ans']}">
- <div id="answer" data-bind="text: ans"></div>
- <div id="name" data-bind="text: nam"></div>
+ <a id="click" data-bind="page-href: {path: 'first', params: {nam: 'foobar', ans: 42}}">click me</a>
+
+ <div data-bind="page: {id: 'first', params: ['nam','ans']}">
+ <div id="answer" data-bind="text: ans"></div>
+ <div id="name" data-bind="text: nam"></div>
+ </div>
</div>
+<div id="b">
+</div>
<script type="text/javascript">
- var viewModel = {
- };
+ try {
+ var viewModel = {
+ };
+ // dummy VM
+ var vm2 = {};
- pager.extendWithPage(viewModel);
- ko.applyBindings(viewModel);
+ pager.extendWithPage(viewModel);
+ // use the same root page
+ vm2.$__page__ = viewModel.$__page__;
+ ko.applyBindings(viewModel, $('#a')[0]);
+ ko.applyBindings(vm2, $('#b')[0]);
- pager.startHashChange();
+ pager.startHashChange();
+ } catch (e) {
+ console.error(e);
+ }
</script>
<script type="text/javascript" src="../lib/qunit-until.js"></script>
Please sign in to comment.
Something went wrong with that request. Please try again.