This is the config properties you can specify inside data-bind="page: {...}"
.
Consult the Event-page for the events you can specify.
data-bind:
can either take a configuration object or a
pager.Page
-instance.
<div data-bind="page: {id: 'someID', title: 'the page title', sourceOnShow: 'some.html', with: somePageViewModel}"></div>
// create a page var somePage = new pager.Page(); // configure the page (the keys are the configurations you can see on this API page) valueAccessorObject = { id:"someID" }; myPage.valueAccessor = function () { return valueAccessorObject; }; // set the view model for the page myPage.viewModel = { answer:42, question:'How many roads must a man walk down before you can call him a man?' }; // bind the page to the main view model var viewModel = { myPage:myPage };
id : String
The ID of the page. It can be either a normal name or ?. ? means that it matches against any route. The ?-ID is useful for automatically matching against a large set of structured values.
<div data-bind="page: {id: 'search'}"> <!-- Search for product here. Will only match #search --> </div> <div data-bind="page: {id: 'product'}"> <!-- List all products here. Will only match #product --> <div data-bind="page: {id: '?', withOnShow: loadProduct}"> <!-- This is a page for any product since the ID is ?. Will match any #product/.* --> <span data-bind="text: productName"></span> </div> </div>
role: String
If your set role: 'start'
the page will work as a start page, i.e. be the default page and work as if
id: 'start'
. The advantage of using role: 'start'
is that you can have another id.
params : String[]
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 params: ['age']
and the parameters for the current page got an age-parameter the value of that parameter
will appear inside the view-model.
<div data-bind="page: {id: 'search', params: ['name', 'price']}"> <label>Name <input type="text" data-bind="value: name"></span></label> <label>Price <input type="text" data-bind="value: price"></span></label> </div>
and the user surfs to /search?name=TV&price=200
the user will see
nameParam: String/Observable
vars: Object
with : Object
Works as the normal with
-binding.
<div data-bind="page: {id: 'fry', with: fry}"> The age of Fry is <span data-bind="text: age"></span> </div>
where
var viewModel = { fry: ko.observable({age: ko.observable(27)}) }
withOnShow
, i.e. should be possible
to be either an object or a method.
withOnShow : Function(Function(Object), Page)
This member makes it possible to lazy-bind a view-model once the page is first displayed. withOnShow
takes a method that should take 2 arguments: a callback (that should be feeded the view-model)
and the current Page-object.
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.
If you set sourceCache: true
the view-model will not reload every time you revisit the page.
<div data-bind="page: {id: '?', withOnShow: Cool.loadUser}"> <h1 data-bind="text: userName"></h1> </div>
Cool.loadUser = function(callback, page) { $.get('service/users/' + page.currentId, function(data) { callback(ko.mapping.fromJSON(data)); }); };
with
, i.e. should be possible
to be either an object or a method.
source : String / Function(Page, Function())
Load content into the page from an external source.
sourceOnShow : Function(Page, Function())
While source
loads the content into the page directly the configuration sourceOnShow
loads the content into the page when the page is first requested.
This configuration can be further controlled using sourceCache
.
sourceLoaded : Function(Page)
Register a callback whenever an external source (source
or sourceOnShow
)
is loaded into the page. Useful for e.g. post-processing.
sourceCache : Boolean / Number
sourceCache will control both the caching of the lazy-loaded source and the lazy-loaded view-model.
If not set (or false) the lazy-loaded model (withOnShow
) and view (withOnShow
) will be
requested
every time the page is displayed.
If set to true both the lazy-loaded model and view are cached.
If set to a number the lazy-loaded view is cached that amount of time in seconds.
frame : String
By specifying frame: 'iframe'
the external source is loaded into an iframe instead.
modal : Boolean
If a page is configured as modal: true
it can appear in child-pages of sibling-pages
to the modal page.
hideElement : Function(Page,Function())
showElement : Function(Page)
fx : String
loader : Function(Page,Node)
guard : Function(Page,String[],Function(),Page)
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.
urlToggle :String
Control when the page will be displayed or hidden. There are three possible values: null
(default),
show
or none
.
null
is the normal behaviour.
show
makes the page show when the route is matching, but wont automatically hide.
none
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 urlToggle: 'none'
will be visible by default.
title : String
Controls the page title if set.
bind: Observable
Binds the page-instance to a variable in the view model.
scrollToTop: Boolean
If true (scrollToTop: true
) then scrolls the page into view when it is displayed.
Used on this demo-page.