Class: KnockoutRouterAdapter

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Module:
  • ojknockoutrouteradapter

QuickNav

Fields

Methods

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>


Usage

Signature:

class KnockoutRouterAdapter<D extends {[key: string]: any} = {[key: string]: any}, P extends {[key: string]: any} = {[key: string]: any}>

Generic Parameters
ParameterDescription
DDetail object for the router state
PParameters object for the router state
Typescript Import Format
//This class is exported directly as module. To import it
import KnockoutRouterAdapter= require("ojs/ojknockoutrouteradapter");

For additional information visit:


Constructor

new KnockoutRouterAdapter(router)

Constructor
Parameters:
Name Type Description
router CoreRouter.<D, P> 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<D, P>>

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 KnockoutRouterAdapter#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.