Navigation structure help

Webix JS
1

I’m finding it hard to decide on the structure of my app.

The most important thing for me is the url for seo. It’s gotta be

http://my-book-site/genres/fiction/authors/jkrowling/books/harry-potter-1

genres, authors & books are list screens, then fiction, jkrowling and harry-potter-1 are selected items from each list.

I have been trying to do dynamic subviews i.e { $subview: true }, using one main view and loading the relevant subview depending on the url

I’m finding it difficult to parse the “selected” value from the url.

Do I try load the subview manually? Maybe switch statement, parse the url, figure out the right list and load the relevant subview?

Do I forget the $subview option and use the .addView() method?

Not sure which is the best to do, just need to make are that any url or part of url will load the correct list/summary

Thanks in advance

2

Oh, to replace the whole hierarchy you need the ID to start with “/”: click option 3 a few times to create some big hierarchy and then click option 4 of the last view.
https://snippet.webix.com/sb3c3j6i

The view.show() method works the same way. If you call it with a string like “somepath”, it replaces {$subview:true} in the current view (the owner of this show method). If you call it with a path like “/somepath”, it replaces the top $subview:true (https://webix.gitbook.io/webix-jet/part-i-basic-usage/in-app-navigation#rebuilding-the-whole-app). And if you call it with a path like “…/somepath”, it will replace $subview:true of the parent of the calling view (etc, Navigation - Webix Jet).

Also there’s app.show() that always renders the given views in the root (In-app Navigation - Webix Jet)

As for maintaining the URL, there are app config properties (views and routes), that help to show one URL, while Jet works with the real one. (https://webix.gitbook.io/webix-jet/part-ii-webix-jet-in-details/app-config#changing-view-creation-logic).

You can also create your custom router (https://webix.gitbook.io/webix-jet/part-ii-webix-jet-in-details/routers#custom-routers)

3

Hi,

in my opinion, $subview:true is the right choice here. Each segment is resolved by Jet, meaning that it looks for a file with the same name in the views folder. Maybe you would also use the UrlParam plugin that lets you treat URL segments as parameters. This will be helpful if you want to preserve the URL as is (with segments) but you do not have view files for each one and would rather load some data into the same view depending on the segment.

I have been trying to do dynamic subviews i.e { $subview: true }, using one main view and loading the relevant subview depending on the url. I’m finding it difficult to parse the “selected” value from the url.

It would be interesting and helpful to look at some simple example in a snippet, because basically when you have a file, a segment with the same name and $subview: true inside the file with the name from previous segment, it works. For example Code Snippet (this example is purely for demonstration purposes)

4

@kuro Thanks for the response.

Your example actually shows my challenge. Each sub page appears within the parent. That’s not what I want. I want the very last page to appear without it’s parents.

So, imagine navigating…

genres → fiction → authors → jkrowling → books → harry-potter-1

using $subviews would have each $subview appearing within it’s parent.

Ideally, I would need the final $subview to replace the top $subview but maintain the url.

5

@kuro I appreciate the help but I can’t seem to get it to suit my needs.

I ended up creating my own type of router which basically adds and removes views depending on the url.