Navigation
There are several ways to navigate through an app with Webix Jet.
1. Jet Links
Jet links are created with the route attribute. Here's an example of a Jet link:
After you click on the link, the app UI will be rebuilt and will consist of the main view top and a subview data. Note that there is no hashbang in the path.
Route for Webix Controls and Various HTML Elements
The route attribute can be added not only to \ elements, but also to Webix controls and other HTML elements.
This is how you can add route to a button:
this in the button handler refers to the button, and this.$scope references the Jet view class [1].
Jet Links with Parameters
You can pass one or more parameters with a Jet link:
2. Navigation with HTML links
You can use href links for navigation. The href attribute can only be added to \ elements:
You can pass one or more parameters in the link, e.g.:
3. app.show()
Apart from links, you can use the show() method of app to switch views. app.show() will rebuild the whole app or app module that called the method. A specific instance of the related view class is referenced with this if your handler is an arrow function [1]. Use this.app to call the show() method from control handlers, for instance:
After a button click, the URL will change, and the app UI will be rebuilt according to it.
app.show() with URL parameters
You can pass one or more parameters with the URL:
4. view.show()
You can also change the URL by calling the show() method from a specific view. A specific instance of the related view class is referenced with this from a handler that is defined as an arrow function [1]. Calling show() from a view gives you more freedom, as it allows rebuilding only this view or only its subview, not the whole app or app module. For example, suppose you have a view like this:
If the current URL is "/layout/details", the subview is details. To replace details with a different subview, specify the name as it is or with ./, and pass it to this.show():
The resulting URL is going to be /layout/demo.
If you want to rebuild the whole app and load the demo view as the only view, specify the name of the view with a slash:
Navigating to Upper Levels
The syntax of showing views resembles the way you navigate through directories. So you can move some levels up from "/layout/details", for example:
As a result, the app URL will be /bigview.
view.show() with URL parameters
You can pass one or more parameters to show() alongside the URL:
Footnotes
[1]:
To read more about how to reference apps and view classes, go to "Referencing views".
Last updated