We have added a notification page for users, where they can have a look at their notifications and manage them separately. Here, we have two buttons for either viewing only the unread or all the notifications. The ‘mark all read’ button, as the name suggests will mark all the notifications as read and is only present in `/notifications/`.
To create the notification page we have three steps
- Create parent route for notification
- Create sub routes for notification/all, notification/index
- Design the notification page
We’ll be generating parents and sub routes by following three commands
| ember generate route notifications ember generate route notifications/index ember generate route notifications/all |
| import Ember from ’ember’;
const { Route } = Ember; export default Route.extend({ |
In the js file we have defined a model, and this model is returned whenever the user navigates to this route ie /notifications.
We have used template name attribute to explicitly define template for this route. As /notifications/ and /notifications/all both have almost the same layout with different data, we have used the same template `notifications/all.hbs` for both of them.
| {{#each model as |notification|}}
class=”ui segment {{unless notification.isRead ‘blue’}}”>
div class=”ui grid”> div class=”row”> div class=”eight wide column”> h4 class=”ui header”>{{notification.title}}h4> p>{{notification.description}}p> div> div class=”eight wide column right aligned”> i class=”checkmark box icon”>i> div> div> div class=”row”> div class=”ten wide column”> button class=”ui blue button”>{{t ‘View Session’}}button> div> div class=”six wide column right aligned”> p>{{moment-from-now notification.createdAt}}p> div> div> div> {{/each}} |
In the template we have checked if the notification is read or not and accordingly a blue segment is put.
<div class=“ui segment {{unless notification.isRead ‘blue’}}”>