When we talk about a web application the first thing comes up is how to decide what to display at a given time which in most of the application is decided with the help of the URL. The URL of the application can be set either by loading the application or by writing the URL manually or may be by clicking some link. In our Open Event Frontend project which is written in Ember.js, an incredibly powerful JavaScript framework for creating web applications, the URL is mapped to the router handlers with the helper of router to render the template for the page, to load the data model to display, to navigate within the application or to handle any actions within the page like button clicking etc.
Suppose the user opens the open event application for the very first time what s/he will see a page containing the list of all the events which are going to happen in the near future along with their details like event name, timings, place, tags etc. If the user clicks one of the events from the list, the current page will be redirected to the detailed specific page for that particular event. The behaviour of changing the content of the page which we observed during this process can be explained with the help of the dynamic segments concept. The dynamic segment is a section of the path for a route which changes based on the content of a page.
This post will focus on how we have added dynamic segments to the route in the open event frontend project.
Let’s demonstrate the process of adding the dynamic segments to the route by taking an example of sessions routes where we can see the list of all the accepted, pending, confirmed and rejected sessions along with their details.
To add a dynamic segment, we need to have a route with path which we add to the route definition in app/router.js file
this.route('sessions', function() {
this.route('list', { path: '/:sessions_state' });
});
Dynamic segments are made up of a : followed by an identifier. Ember follows the convention of :model-name_id for two reasons. The first reason is that routes know how to fetch the right model by default if we follow the convention. The second is that params is an object, and can only have one value associated with a key.
After defining the path in app/router.js file we need to add template file, app/templates/events/sessions/list.hbs which contain the markup to display the data which is defined in the file, app/routes/events/sessions/list.js under the model hook of the route in order to display the correct content for the specified option.
Code containing the markup for the page in app/templates/events/sessions/list.hbs file
<div class="sixteen wide column"> <table class="ui tablet stackable very basic table"> <thead> <tr> <th>{{t 'State'}}</th> <th>{{t 'Title'}}</th> <th>{{t 'Speakers'}}</th> <th>{{t 'Track'}}</th> <th>{{t 'Short Abstract'}}</th> <th>{{t 'Submission Date'}}</th> <th>{{t 'Last Modified'}}</th> <th>{{t 'Email Sent'}}</th> <th></th> <th></th> </tr> </thead> <tbody> {{#each model as |session|}} <tr> <td> {{#if (eq session.state "confirmed")}} <div class="ui green label">{{t 'Confirmed'}}</div> {{else}} <div class="ui red label">{{t 'Not Confirmed'}}</div> {{/if}} </td> <td> {{session.title}} </td> <td> <div class="ui ordered list"> {{#each session.speakers as |speaker|}} <div class="item">{{speaker.name}}</div> {{/each}} </div> </td> <td> {{session.track}} </td> <td> {{session.shortAbstract}} </td> <td> {{moment-format session.submittedAt 'dddd, DD MMMM YYYY'}} </td> <td> {{moment-format session.modifiedAt 'dddd, DD MMMM YYYY'}} </td> <td> {{session.emailSent}} </td> <td> <div class="ui vertical compact basic buttons"> {{#ui-popup content=(t 'View') class='ui icon button' position='left center'}} <i class="unhide icon"></i> {{/ui-popup}} {{#ui-popup content=(t 'Edit') class='ui icon button' position='left center'}} <i class="edit icon"></i> {{/ui-popup}} {{#ui-popup content=(t 'Delete') class='ui icon button' position='left center'}} <i class="trash outline icon"></i> {{/ui-popup}} {{#ui-popup content=(t 'Browse edit history') class='ui icon button' position='left center'}} <i class="history icon"></i> {{/ui-popup}} </div> </td> <td> <div class="ui vertical compact basic buttons"> {{#ui-dropdown class='ui icon bottom right pointing dropdown button'}} <i class="green checkmark icon"></i> <div class="menu"> <div class="item">{{t 'With email'}}</div> <div class="item">{{t 'Without email'}}</div> </div> {{/ui-dropdown}} {{#ui-dropdown class='ui icon bottom right pointing dropdown button'}} <i class="red remove icon"></i> <div class="menu"> <div class="item">{{t 'With email'}}</div> <div class="item">{{t 'Without email'}}</div> </div> {{/ui-dropdown}} </div> </td> </tr> {{/each}} </tbody> </table> </div>
Code containing the model hook in app/routes/events/sessions/list.js to display the correct content. We access the dynamic portion of the URL using params.
import Ember from 'ember'; const { Route } = Ember; export default Route.extend({ titleToken() { switch (this.get('params.session_status')) { case 'pending': return this.l10n.t('Pending'); case 'accepted': return this.l10n.t('Accepted'); case 'confirmed': return this.l10n.t('Confirmed'); case 'rejected': return this.l10n.t('Rejected'); } }, model(params) { this.set('params', params); return [{ title : 'Test Session 1', speakers : [{ name: 'speaker 1', id: 1, organization: 'fossasia' }, { name: 'speaker 2', id: 1, organization: 'fossasia' }], track : 'sample track', shortAbstract : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', submittedAt : new Date(), modifiedAt : new Date(), emailSent : 'No', state : 'confirmed' }, { title : 'Test Session 2', speakers : [{ name: 'speaker 3', id: 1, organization: 'fossasia' }, { name: 'speaker 4', id: 1, organization: 'fossasia' }], track : 'sample track', shortAbstract : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', submittedAt : new Date(), modifiedAt : new Date(), emailSent : 'Yes', state : 'confirmed' }]; } });
After the route is fully configured, we need to start linking it from the templates which mean we need to link it in our parent template, app/templates/events/view/sessions.hbs file using the {{link-to}} helper. The code for the linking looks like this:
{{#tabbed-navigation isNonPointing=true}}
{{#link-to 'events.view.sessions.index' class='item'}}
{{t 'All'}}
{{/link-to}}
{{#link-to 'events.view.sessions.list' 'pending' class='item'}}
{{t 'Pending'}}
{{/link-to}}
{{#link-to 'events.view.sessions.list' 'accepted' class='item'}}
{{t 'Accepted'}}
{{/link-to}}
{{#link-to 'events.view.sessions.list' 'confirmed' class='item'}}
{{t 'Confirmed'}}
{{/link-to}}
{{#link-to 'events.view.sessions.list' 'rejected' class='item'}}
{{t 'Rejected'}}
{{/link-to}}
{{/tabbed-navigation}}
The User Interface for the above code looks like this:
Fig. : The page containing all the accepted session
To conclude this, we can say the task of the route is to load the modal to display the data. For example, if we have the route this.route(‘sessions’);, the route might load all of the sessions for the app but we want only the particular type of session so the dynamic segments help to load the particular model and make it easier to load and display the data.
Reference: The link to the complete code is here. For getting more knowledge about dynamic segments please visit this.