Creating nested routes in ember JS and navigating them with tabs via semantic UI - ember integration
May 16, 2017
Semantic UI is a modern development framework which helps build responsive and aesthetically beautiful layouts. While it is a really powerful framework in itself, it additionally offers seamless integrations with some of the other open source frameworks including ember js.
Open event front end is a project of fossasia organisation, which was created with the aim of decoupling the front end and the back end for the open event orga server. It is primarily based on ember JS and uses semantic UI for
Here we will be making a nested route
/events/live/, events/draft, events/past , events/import as it’s subroutes.
To get started with it, we simply use the ember CLI to generate the routes
Then we go on to generate the successive sub routes as follows
The router.js file should be looking like this now.
This means that our routes and sub routes are in place.
Since we used the emebr CLI to generate these routes, the template files for them would have generated automatically.
Next, we go to the template file of events/ route
which is at templates/events.hbs
And write the following code to create a menu and use ember integration of semantic UI link-to to link the tabs of the menu with the correspondinf correct route. It will take care of selecting the appropriate data for the corresponding route and display it in the correct tab via the outlet.
So finally, we start filling in the data for each of these routes. Let’s fill some dummy data at
Similarly we can fill the required data for each of the routes.
And this is it, our nested route is ready.
Here are some screenshots.