You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by an...@apache.org on 2020/03/02 23:34:07 UTC

[royale-docs] branch master updated: Update routing.md

This is an automated email from the ASF dual-hosted git repository.

andreww pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git


The following commit(s) were added to refs/heads/master by this push:
     new bb214cc  Update routing.md
bb214cc is described below

commit bb214cc254aeb8ab58633b0314f5ccaa548361a7
Author: Andrew Wetmore <an...@cottage14.com>
AuthorDate: Mon Mar 2 19:34:02 2020 -0400

    Update routing.md
    
    Moved material here from the routing tutorial page.
---
 features/routing.md | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/features/routing.md b/features/routing.md
index 2007d55..1d808c3 100644
--- a/features/routing.md
+++ b/features/routing.md
@@ -23,4 +23,35 @@ permalink: /features/routing
 
 Map URL parameters to different initial values in the app, and vice versa
 
-_Documentation goes here._
+_this page is not complete_
+
+## Basic Router
+````
+<js:Router id="router" stateChange="hashChanged()"/>
+````
+In the above example, any time the route changes, the `stateChanged` function will be called.
+
+The state of the router can likewise be changed directly by modifying the `router.routeState` and calling `router.setState()` `router.renderState()` is a similar method, but it will dispatch the `stateChanged` event as well and cause any attached beads to react to the state change.
+
+## Router Beads
+The full power of the Router becomes apparent when you use beads. Router can automatically sync the route state with the component's state. It can change which component is shown by creating and removing components. It can handle parameters, etc. Here are some examples:
+````
+<js:Router localId="router">
+    <js:RouteToState component="{footer}"/>
+    <js:RouteTitleLookup lookup="{getTitleLookup()}"/>
+</js:Router>
+````
+
+In this example, the router syncs the state of the footer with the route path. The RouteTitleLookup allows changing the window title based on the state. The `lookup` property is an object whose keys are the state names and the values are the corresponding titles.
+
+Routers and RouteTotState can be declared on and for more than one component, so state can be changed and synced across multiple components with ease.
+
+Another example which routes to components: (in progress)
+````
+<js:Router localId="router">
+    <js:RouteToComponent component="{footer}"/>
+    <js:RouteTitleLookup lookup="{getTitleLookup()}"/>
+</js:Router>
+````
+
+*Instructions and sample code will appear here soon to show how you can map URL parameters to different initial values in the application, and vice versa.*