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
|
||||||||||||||||||||||||||||||||
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)|undefined
-
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)|undefined
-
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()|undefined
-
The enter callback. This callback is executed when the router enter this state.
- Source:
-
exit :function()|undefined
-
The exit callback. This callback is executed when the router exit this state.
- 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. When building the navigation command on the
- 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>
-
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}
-
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 propertyhasChanged
.
The value ofhasChanged
is:- true: If the router state changed.
- An Error object stipulating the reason for the rejection when an error occurred during the resolution.
- Type
- Promise
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>