An MVC for NodeJS built on Koa

View on GitHub
Home | Documentation | Core | CLI | Install

Co.Koa header


View components are maintained according to the structure below:


The principal is simple: store your views in the views directory and your helpers, layouts and partials accordingly. Views are simply an implementation of koa-hbs-renderer; it is recommended that you explore the koa-hbs-renderer module, the Handlebars documentation and the HBS documentation to fully understand Co.Koa’s views and what they can do. Below is a simple sample:

Requesting a View

Suppose we have a view called SampleView.hbs saved in the \api\views directory. The view expects a single variable called action to be passed to it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html lang="en"><head></head>
<body> <p>I'm a view, I was called by the action: {{action}}</p> </body>

If we add the following to a controller, we’re good to go!

'GET /HBSDemo': async (ctx) => {
  await ctx.render('SampleView', { action: '/HBSDemo' });


you can add custom helpers with ease! for example, maybe you want to make hbs files handle more complex conditional statements. No prob, suppose we have a file saved at \api\views\helpers\CK.js:

module.exports = {
  eq: (foo, bar) => foo === bar,
  ne: (foo, bar) => foo !== bar,
  lt: (foo, bar) => foo < bar,
  gt: (foo, bar) => foo > bar,
  lte: (foo, bar) => foo <= bar,
  gte: (foo, bar) => foo >= bar,
  and: (foo, bar) => foo && bar,
  or: (foo, bar) => foo || bar

now your .hbs file can use custom logic!

    {{#if (CK_and (CK_eq parent 'PartialSample')
                  (CK_ne parent 'SampleView')) }}
      I am the product of an "if" condition using embedded operands!
      I am the product of an "else" condition

Note that your helpers are prefixed with CK_. helper methods are prefixed with their filenames (acting like a namespace).


Layouts, as their name suggests, are intended to layout pages. They can be useful for maintaining generic client-side JS libraries, styling, etc. You could have a layout manage the theme of your website with something as elementary as:

  <title>Website Title</title>
  <script ... >
  <link ... >
<h3>Website Title</h3>


Cached partials allow you to modularise your HTML pages, perhaps we have a partial called partialsSample.hbs we would like to inject data into. That might look as below:

    {{> PartialSample parent="SampleView"}}

Our partial might look something like the following:

I'm a partial, I have been injected into view {{parent}}
  I can also inject partials into myself; I will demonstrate by putting some content in an undordered list below:
      {{> PartialInnerSample parent="PartialSample"}}

Note that the above reads the parent variable supplied by the view and - in turn - can be passed partials as well (for example: PartialInnerSample).