Class: KnockoutRouterAdapter

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

KnockoutRouterAdapter

Version:

8.0.0

Module:

ojknockoutrouteradapter

Module usage

See JET Module Loading for an overview of module usage within JET.

Javascript Import Format

define(['ojs/ojknockoutrouteradapter'], function(KnockoutRouterAdapter) {
 // Application should call API on KnockoutRouterAdapter 
})

Typescript Import Format

//This class is exported directly as module. To import it
import KnockoutRouterAdapter= require("ojs/ojknockoutrouteradapter");

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

Description

A Knockout adapter, to be used in conjunction with CoreRouter, to allow components to two-way bind their values to the router's current state.

Creating the adapter in view model

Instantiate the adapter with the router in your view model, and assign it as an instance variable.


var router = new CoreRouter([
  { path: 'home' }
]);
this.koAdapter = new KnockoutRouterAdapter(router);

Use the "koAdapter" adapter instance in your view bindings with standard binding syntax. Here, an <oj-navigation-list>'s selection property is two-way bound to the adapter's path observable. When a navigation list item is selected, the binding notifies the adapter of the selection change, and the adapter, in turn, instructs the router to navigate to the path matching the selection.


<oj-navigation-list selection="{{koAdapter.path}}">
</oj-navigation-list>

Binding to router state fields

CoreRouterState exposes the CoreRouterState.detail and CoreRouterState.params objects (if defined), and these can also be used in view bindings to provide additional information. Here, a label is set in the route's detail object.


var router = new CoreRouter([
  { path: 'home', detail: { label: 'Home Page' } }
]);
this.koAdapter = new KnockoutRouterAdapter(router);

The additional "detail" object can be retrieved from the state observable to display. Notes:

"state" is an observable an must be unwrapped before its sub-properties can be accessed.
One-way binding should be used because the values under detail aren't observable (they're whatever was set during router configuration)
Because the state may initially be undefined (before navigation has begun), we must guard against it with <oj-bind-if>.


<h2>
  <oj-bind-if test="[[koAdapter.state]]">
    <oj-bind-text value="[[koAdapter.state().detail.label]]"><oj-bind-text>
  </oj-bind-if>
</h2>

Constructor

new KnockoutRouterAdapter(router)

Constructor

Parameters:

Name	Type	Description
`router`	CoreRouter	The CoreRouter instance on which this adapter will listen for state changes.

Fields

(readonly) path :ko.Observable.<string>

An observable containing the current value of CoreRouterState.path. This observable can be used in two-way bindings to read the value of the current state, as well as navigate the router to a new path. When this observable's value changes, the underlying CoreRouter.go method is called with the new value as the path.

(readonly) state :ko.Observable.<CoreRouter.CoreRouterState>

An observable containing the current CoreRouterState from the router, if defined. Note that this CoreRouterState's path is the original string value from the class, and can only be used read-only. In order to navigate the router from a component value using two-way binding, use the observable path instead. This observable is read-only, and may not be written to.

Methods

destroy()

Cleans up this adapter by removing its subscription to the router state changes. This should only be called if the CoreRouter and this adapter are NOT expected to be garbage-collected together.