Hi Wizards of Webix,
I would like to ask for your wisdom with regards to webix-jet routing / referencing subviews, I am new to this and my background is in devops/ infrastructure automation, just thought that it would be cool to have a better understanding of SPAs and based on my research Webix is one of if not the best framework for that. I can’t seem to find any examples / wrap my head around the implementation of URL change based view loading, even after spending considerable amount of time testing and reading up on it.
I am trying to use make a sample basic app (index.ts) with a menu view (top.ts) which has subviews myview.ts/aboutview.ts. The code gets transpiled to ES5 using webpack-cli. The page loads, and when I click on one of the options the corresponding view is loaded. All good so-fare, however the problem is that when I try to load subview via browser addressbar (/top/myview or /top/aboutview) it only loads “/top” view and subview never gets loaded.
Looking at the documentation, I think the urlchange() method [1][2] needs to be invoked but not sure if that is the best way to do that and if so how to do it/ where can I find example code for that. Can someone please show me how is this done? Thank you.
References:
[1] Page not found - Webix Jet
[2] https://blog.webix.com/webix-jet-chronicles-whats-new/
Below you can see the “application” code.
index.ts:
import {JetApp, JetView,EmptyRouter } from "webix-jet";
import "../node_modules/webix/webix";
declare var require: any
import TopView from "./views/top" ;
import AboutView from "./views/aboutview" ;
webix.ready(() => {
const app = new JetApp({
start: "/top/myview",
// router: HashRouter,
// routes: {
// "/x" : "/top/aboutview",
// "/y" : "/top/myview"
// },
//router: UrlRouter,
//routerPrefix: configjson.routerPrefix,
debug: true,
});
app.render();
app.attachEvent("app:error:resolve", function(name:any, error:any){
window.console.error(error);
});
});
top.ts:
import {JetView} from "webix-jet";
export default class TopView extends JetView {
config(){
return {
type:"space", cols:[
{ view:"list", width: 200, select:true, data:[
{ value:"Myview", id:"myview", route:"myview"},
{ value:"About", id:"about", route:"aboutview"}
], click:function(id){
var item = this.getItem(id);
this.$scope.show(item.route);
console.log(item+"dd")
}},
{ $subview: true }
]
};
}
init(view, url){
var id = url[1].page //this.getParam("id", true);
//this.show(id.route);
console.log(id)
}
}
myview.ts:
import {JetView, plugins} from "webix-jet";
export default class MyView extends JetView{
config(){
return {
template:"MyView text"
};
}
}
aboutview.ts:
import {JetView, plugins} from "webix-jet";
export default class AboutView extends JetView{
config(){
return {
template:"About page"
};
}
}