/js.core.handlebars

Addon component for js.core to allow templating

Primary LanguageJavaScriptMIT LicenseMIT

Core › Handlebars

Licence: MIT

npm version

This is an addon module to the superhero/core module. This addon will add a handlebars view option.

Install

npm install @superhero/core.handlebars

...or just set the dependency in your package.json file:

{
  "dependencies":
  {
    "@superhero/core.handlebars": "*"
  }
}

Example Application

Example Application › File structure

src
├── api
│   └── foobar.js
├── view
│   ├── foobar.hbs
│   └── layout.hbs
├── config.js
├── index.js
└── package.json

package.js

{
  "name": "Super Duper App",
  "version": "0.0.1",
  "description": "An example meant to describe the libraries fundamentals",
  "license": "MIT",
  "dependencies": {
    "superhero": "*",
    "@superhero/core.handlebars": "*"
  }
}

config.js

module.exports =
{
  handlebars:
  {
    partials:
    {
      layout  : 'view/layout'
    }
  },
  core:
  {
    http:
    {
      server:
      {
        routes:
        {
          'create-calculation':
          {
            url       : '/',
            method    : 'get',
            view      : '@superhero/core.handlebars',
            input     : false,
            template  : 'view/foobar',
            endpoint  : 'api/foobar'
          }
        }
      }
    }
  }
}

index.js

const
CoreFactory = require('superhero/core/factory'),
coreFactory = new CoreFactory,
core        = coreFactory.create()

core.add('api')
core.add('@superhero/core.handlebars')

core.load()

core.locate('bootstrap').bootstrap().then(() =>
core.locate('core/http/server').listen(80))

api/foobar.js

const Dispatcher = require('superhero/core/http/server/dispatcher')

class FoobarEndpoint extends Dispatcher
{
  async dispatch()
  {
    // Building a view model that we can use to render the view
    this.view.body.foo = 'bar'
  }
}

module.exports = FoobarEndpoint

view/layout.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ title }}</title>
  </head>

  <body>
    <main>
      {{> @partial-block }}
    </main>
  </body>
</html>

view/foobar.hbs

{{#> layout title="Insert awesome title for the page here" }}
  <p>
    Write your markup here with support for variables, eg: "{{ foo }}"
  </p>
{{/ layout }}

Config overview

module.exports =
{
  handlebars:
  {
    // optional base path parameter that can be utelised to set the prefixed directory path for all view templates
    basepath: '',
    // The library has a few defined core helpers that are activated by default, but can be deactivated with a falsy flag
    helpers:
    {
      'calculate'       : '@superhero/core.handlebars/helper/calculate',
      'case'            : '@superhero/core.handlebars/helper/case',
      'concat'          : '@superhero/core.handlebars/helper/concat',
      'dateformat'      : '@superhero/core.handlebars/helper/dateformat',
      'escDoubleQuote'  : '@superhero/core.handlebars/helper/esc-double-quote',
      'escSingelQuote'  : '@superhero/core.handlebars/helper/esc-singel-quote',
      'if'              : '@superhero/core.handlebars/helper/if',
      'jsonStringify'   : '@superhero/core.handlebars/helper/json-stringify',
      'math'            : '@superhero/core.handlebars/helper/math',
      'padEnd'          : '@superhero/core.handlebars/helper/pad-end',
      'padStart'        : '@superhero/core.handlebars/helper/pad-start',
      'replace'         : '@superhero/core.handlebars/helper/replace',
      'slice'           : '@superhero/core.handlebars/helper/slice',
      'stripTags'       : '@superhero/core.handlebars/helper/strip-tags',
      'substr'          : '@superhero/core.handlebars/helper/substr',
      'switch'          : '@superhero/core.handlebars/helper/switch',
      'toFixed'         : '@superhero/core.handlebars/helper/to-fixed',
      'toLowerCase'     : '@superhero/core.handlebars/helper/to-lower-case',
      'toUpperCase'     : '@superhero/core.handlebars/helper/to-upper-case',
      'trim'            : '@superhero/core.handlebars/helper/trim',
      'unless'          : '@superhero/core.handlebars/helper/unless'

      // You can add a custom helper by specify it's name and the path to the service that returns a helper function through the method: "create"
      // example:
      // 'customHelper'    : 'path-to-helper'
    },
    partials:
    {
      // it's possible to register partials to be loaded and used through-out the application
      // example:
      // foo  : 'view/foobar'
    }
  }
}