These are all the static methods that exists directly on the page
-object.
See the Event-page for list of events.
start([id: String / {noGo:Boolean}])
This method will start to listen to hashchange-events. Works only for newer browsers (not IE7/IE8).
Include jQuery Hashchange
plugin to get support for IE7/IE8.
This method should be called after ko.applyBindings(...)
.
If an ID is supplied that ID will be set as initial location.hash
.
If start({noGo: true})
then the initial path will be ignored - not triggering a navigation.
// 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();
startHistoryJs([id: String / {noGo:Boolean}])
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.
This method should be called after ko.applyBindings(...)
.
If an ID is supplied that ID will be set as initial History.pushState
.
If start({noGo: true})
then the initial path will be ignored - not triggering a navigation.
// 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();
extendWithPage(viewModel : Object)
Create a new Page-object and set it on pager (pager.page
) as well as the
viewModel (viewModel.$__page__
). This page-object works as the root page.
You must call this method (or do the identical thing yourself) before calling
ko.applyBindings(...)
showChild(route : String[])
Will trigger pager.page.childManager.showChild
, 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.
page : pager.Page
The root page. Got no ID. Using this reference (or $__page__
in the view model)
it is possible to e.g. get a hold of all the pages on the site using pager.page.children()
useHTML5history: Boolean
Default to false
. If set to true
the custom binding page-href
will use true URLs instead of
hash bangs. If History.js is used (by setting pager.Href5.history = History
after loading
History.js) a fallback solution with hash bangs will be used for older browsers.
getParentPage(BindingContext) : Observable(Page)
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.
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') }); } };
Href.hash: String
Defaults to #
. Can be set to #!/
if google style hash bangs are preferred.
Href5.history: Object
Defaults to window.history
. Can be set to History
if
History.js is loaded. This object will be used by page-href
when useHTML5history === true
.
goTo: Function(String)
Go to the page at the path. Will not update the URL.
var path = "#!/this/is/a/path"; pager.goTo(path);
navigate: Function(String)
Update the URL to the path (as a String
), triggering a navigation.
This is the preferred way to trigger navigation from the code.
var path = "#!/this/is/a/path"; pager.navigate(path);
activePage$: Observable(pager.Page)