KeystoneJS, A Javascript CMS (Part 3— Routes, Views & Templates)

Part 1 — Getting Started
Part 2 — Code Structure & the DB Model
Part 3 — Routes, View, and Templates
Part 4 — Accessing Data

In the last session, we created a new Database Model and saw the reflected change in the Admin UI. In this session we will create a new route, and a view to go with it.

Creating a Route

The following line creates an endpoint/route for our new page. Add it to routes/index.js. (Line 38)

app.get('/announcement', routes.views.announcement);

Creating a View

Create file announcement.js in routes/views, and add this :

var keystone = require('keystone');
exports = module.exports = function (req, res) {
var view = new keystone.View(req, res);
    var locals = res.locals;
    locals.section = 'announcement';
    view.render('announcement');
};

The important bit here is view.render(‘announcement’), which looks for the announcement template in the templates/views directory. This is specified in the views option of file keystone.js.

For the final piece in routing, we should add this line to our routes/middleware.js file. This will add our new route into the Navigation Bar of the app.

{ label: 'Announcement', key: 'announcement', href:'/announcement' }

Browse to the homepage, and you will see an Announcement link in the Nav Bar. Click on it, but at this stage it will return a 500 Error. Let’s fix that below.

Creating a Template

Create a file announcement.hbs in templates/views.
Paste the following as a placeholder -

<div class="container">
 <h2>Announcements</h2>
 <h3>Hello, Welcome to the School's Announcement Page</h3>
</div>

Now navigating to the Announcements page will work.

In the next session we will be working to access the data which keystone is storing for us in MongoDB.

KeystoneJS, A Javascript CMS (Part 4— Accessing Data)

Need professional software development services ?
Visit http://www.biztek.co.nz/