In-app Navigation

Routing means navigating from one part of the application to another. Navigation is implemented by changing the URL of the page. The URL reflects the current state of the app. By default, it is stored as a part after the hashbang. Only the part after the hashbang (#!) is changed [1]. When the URL is changed, the app updates itself accordingly.

Advantages of Jet Navigation

  • Browser Navigation Keys: Jet URL is stored in the browser history, so you can move backwards and forwards to previously opened subviews.

  • Refresh Friendly: If you reload the page, the URL will stay the same and the state of the UI will be exactly the same as before a page reload.

  • Convenient Development: If you work on some particular subview (e.g. games), you can open the path to it (#!/games) and test it separately from the rest of the UI.

In the previous section, "Creating views", you have read about direct URL navigation. There are three [2] more ways to show views and subviews:

1. Jet Links

You can add links with the route attribute and provide the URL to the desired views, e.g.:

export default {
    template:'<a route="/top/data">Data</a>'
}

After you click on the link, the app UI will be rebuilt and will consist of the parent view top and a subview data.

You can pass one or more parameters with a Jet link:

// one
export default {
    template:'<span route="/top/data?id=2">Data</span>'
}
// or several
export default {
    template:'<span route="/top/data?id=2&name=some">Data</span>'
}

2. app.show()

The app.show() method is applied to the whole application and rebuilds its UI (only the parts that changed). You can call the method from control handlers, for instance.

Here is how you can rebuild the app UI with app.show(). this refers to a specific instance of the related view class if you define handlers as arrow functions [3].

// views/layout.js
...
{ view:"button", value:"Details", click: () => {
    this.app.show("/demo/details");
}}
...

After a button click, the URL will change, and the app UI will be rebuilt according to it.

Showing Views in Subfolders

If your views folder includes subfolders, you can show the views with the subfolder.file path:

this.app.show("/demo/details.form");

where the folder structure is:

- start.js
- details
    - form.js
    - some.js

Alternatively, you can provide shorter paths to views.

app.show() with URL Parameters

You can pass one or more parameters to show alongside the URL:

// views/layout.js
// one
this.app.show("/demo/details?id=2");
// or many
this.app.show("/demo/details?id=2&name=some");

3. view.show()

Rebuilding Part of the App

You can also change the URL by calling the show() method of a specific view class. Showing subviews with view.show() 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:

// views/layout.js
import {JetView} from "webix-jet";

export default class LayoutView extends JetView {
    config(){
        return {
            rows:[
                { view:"button", value:"demo" },
                { $subview:true }
            ]
        };
    }
}

If the current URL is "/layout/details", the subview is details. Let's replace details with the demo subview on a button click. Pass the name of the subview as it is or with "./" to show().

this refers to a specific instance of the related view class if you define a handler as an arrow function [4]. To rebuild a part of the UI, call this.show():

// views/layout.js
import {JetView} from "webix-jet";

export default class LayoutView extends JetView {
    config(){
        return {
            rows:[
                { view:"button", value:"demo", click: () => {
                    this.show("demo");
                }},
                { $subview:true }
            ]
        };
    }
}

//or
...
    { view:"button", value:"Demo", click: () => {
        this.show("./demo");
    }}
...

If you click Demo, the resulting URL is going to be /layout/demo.

Rebuilding the whole app

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:

// views/layout.js
...
{ view:"button", value:"demo", click: () => {
    this.show("/demo");
}}
...

Showing Views in Subfolders

If your views folder includes subfolders, you can show the views with the subfolder.file path:

this.show("details.form");

where the folder structure is:

- start.js
- details
    - form.js
    - some.js

Alternatively, you can provide shorter paths to views.

view.show() with URL Parameters

You can pass one or more parameters with the URL:

// views/layout.js
// one
this.show("demo?id=2");
// or many
this.show("demo?id=2&name=some");

Further reading

This is all about Webix Jet in a nutshell.

You can also read these sections of Part II:

Footnotes

[1]:

This is relevant for HashRouter, which is the default router. Hashbang is not displayed if you use UrlRouter. The app part of the URL isn't displayed at all if you use other types of routers. However, the app URL is stored for all the three routers except EmptyRouter and the behavior is the same as if the URL were displayed. For more details, see section "Routers".

[2]:

There is one more way, described in the advanced part, the "Navigation" chapter.

[3],[4]:

To read more about how to reference apps and view classes, go to "Referencing views".

PreviousCreating ViewsNextPart II - Webix Jet in details

Last updated