Class: RouterState

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

Fields

oj. RouterState

Version:
  • 3.2.0
Since:
  • 1.1.0
Object representing a state of the router.

Constructor

new RouterState(id, options, router)

It is the type of the currentState property and type of the value returned by getState(String).
Parameters:
Name Type Argument Description
id string the state id. See the oj.RouterState#id property.
options Object <optional>
an object defining the state.
Properties
Name Type Argument Description
label string <optional>
the string to be displayed in the command component. See the oj.RouterState#label property.
value * <optional>
the object associated with this state. See the oj.RouterState#value property.
isDefault boolean <optional>
true if this state is the default. See the defaultStateId property.
canEnter function(): boolean | function(): Promise.<boolean> <optional>
A callback that either returns a boolean or the Promise of a boolean. If the boolean is true the transition will continue. The default value is a method that always returns true. See the oj.RouterState#canEnter property.
enter function() | function(): Promise <optional>
A callback or the promise of a callback which execute when entering this state. See the oj.RouterState#enter property.
canExit function(): boolean | function(): Promise.<boolean> <optional>
A callback that either returns a boolean or the Promise of a boolean. If the boolean is true the transition will continue. The default value is a method that always returns true. See the oj.RouterState#canExit property.
exit function() | function(): Promise <optional>
A callback or the promise of a callback which execute when exiting this state. See the oj.RouterState#canExit property.
router oj.Router <optional>
The router this state belongs to. If undefined, the method go and isCurrent will not work.
Source:

Fields

canEnter :function():boolean|function():Promise.<boolean>

A callback that either returns a boolean or the Promise of a boolean. When defined, this callback is executed before entering this state. If the boolean is true the transition will continue, otherwise the state is not entered and the current state of the router does not change. The default value is a method that always returns true.
Source:

canExit :function():boolean|function():Promise.<boolean>

A callback that either returns a boolean or the Promise of a boolean. When defined, this callback is executed before exiting this state. If the boolean is true the transition will continue, otherwise the state is not exited and the current state of the router does not change. The default value is a method that always returns true.
Source:

enter :function()|function():Promise

A callback or the promise of a callback which execute when entering this state. This callback executes after the router stateId changes.
Source:

exit :function()|function():Promise

A callback or the promise of a callback which execute when exiting this state. This callback executes before the router stateId changes.
Source:

<readonly> id :string

The id of this state.
It uniquely identify a state object in a router. The id property can be used as the attribute id of a navigation component like link or button.
Source:
Example

Use the state id property for the attribute id of anchor tags in a list:

<ul id="foreachMenu" data-bind="foreach: router.states">
  <li>
    <a data-bind="text: label, css: {'active': isCurrent()},
                  attr: {id: id}, click: go"> </a>
  </li>
</ul>

label :string|undefined

The string to be used for the navigation component that will transition to this state. This is also used to build the title of the page when the oj.RouterState#title property is not defined. The title will be composed of the labels of all current states in the router hierarchy like "My Page | label lvl1 | label lvl2".
Source:
Example

Use the label property for the text of anchor tags in a list:

<ul id="foreachMenu" data-bind="foreach: router.states">
  <li>
    <a data-bind="text: label, css: {'active': isCurrent()},
                  attr: {id: id}, click: go"> </a>
  </li>
</ul>

title :string|function():string|undefined

The string to be used for the page title. This can either be a string or a function returning a string. When more than one level of child router is defined, the title of the current state of the router nested the deepest has precedence. If the leaf router current state does not have a title property defined, the title of the current state of the parent router is used. If no title property is defined in the router hierarchy, a title is built using the oj.RouterState#label property.
Source:

value :*

The value associated with this state. When this state is the current state of the router, it is the value returned by the observable oj.Router#currentValue.
Source:

Methods

go() → {Promise.<{hasChanged: boolean}>}

Transition the router to this state. This is a convenience method used as the event handler for a Knockout click binding on a button or a tag.
A transitionedToState signal is dispatched when the state transition has completed.
Source:
Returns:
A Promise that resolves when the router is done with the state transition.
When the promise is fullfilled, the parameter value is an object with the property hasChanged.
The value of hasChanged is:
  • true: If the router state changed.
When the Promise is rejected, the parameter value is:
  • An Error object stipulating the reason for the rejection when an error occurred during the resolution.
Type
Promise.<{hasChanged: boolean}>
Example

Use the go function as the handler for a click binding:

<ul id="foreachMenu" data-bind="foreach: router.states">
  <li>
    <a data-bind="text: label, css: {'active': isCurrent()},
                  attr: {id: id}, click: go"> </a>
  </li>
</ul>

isCurrent() → {boolean}

Determine if the router current state is this state. This method is typically used by elements in the markup to show the appropriate selection value.
Source:
Throws:
An error if an owning router was not specified when the state was created.
Returns:
true if this state is the current router state.
Type
boolean
Example

Use the is function to change the css of the state links:

<ul id="foreachMenu" data-bind="foreach: router.states">
  <li>
    <a data-bind="text: label, css: {'active': isCurrent()},
                  attr: {id: id}, click: go"> </a>
  </li>
</ul>