simple riot.js app with route-based content toggling
This is a simple application using riot.js v2.6.0 that defines routes in tags that show/hide themselves based on the current route.
You can see the app running at https://gr2m.github.io/riot-router-example/.
git clone https://github.com/gr2m/riot-router-example.git cd riot-router-example
Start a local http server in the folder. This will work on Mac or Linux:
python -m SimpleHTTPServer
index.html in your browser at the server URL.
How it works
In the index.html file, all
*.tag files are loaded, as well as
riot+compiler.min.js which compiles the
*.tag files on the fly to
There is only the
<app> custom tag in index.html, which we mount at the end
<script> tag. With that, all other tags are mounted as they are listed
in tags/app.tag. Other than listing all other custom tags, we
only start the routing in
All the content tags create their own local route function. By default, they set
show variable to false. If their defined route matches, it gets
set to true. That way all logic is contained in the custom tags.
tags/show-app.tag also shows how a tag can route for dynamic routes that pass an id in the route, just for reference.
If you have any questions, ping me on Twitter at @gr2m.