nct

Flexible, powerful, asynchronous (and synchronous) templates for node.js and the browser.

npm install nct
42 downloads in the last week
176 downloads in the last month

nct

nct is a javascript templating engine. it is:

  • either fully asynchronous, or synchronous
  • composable (through Django style parent/blocks)
  • compiled to source for straightforward use in the browser
  • lightweight markup -- the appearance should avoid heavy amounts of braces. Mustache inspired, one less brace!
  • coffeescript precompiler, for a markup as code approach
  • logic free -- push any view logic into the context.
{extends layout}
{block main}
  <h1>{pageTitle}</h1>
  {if loggedIn}
    <h2>Hello {name}</h2>
  {else}
    <h2>Join Now</h2>
    <ul>
    {# benefits}
      <li>{name}</li>
    {/#}
    </ul>
  {/if}
{/block}

Or, with coffeescript precompiler:

$block 'main', ->
  h1 '@pageTitle'
  $if '@loggedIn', (->
    h2 'Hello '+'@name'
  ), ->
    h2 'Join Now'
    ul ->
      $each '@benefits', ->
        li '@name'

Syntax

Tags are indicated by single braces, for example {name}, and {if variable}.

Variable {variable.name}

Variable lookups are surrounded by single braces. The lookup will try to find the variable name in the current context. If it is not found, nothing will be rendered (it will fail silently).

  • Dotted accessors can be used to reach into objects, eg: {person.name}
  • Variables are HTML escaped by default. Unescaped HTML can be returned with the {- tag } format.
  • whitespace is not significant. Both {name} and { name } will work.
  • However, if the variable name starts with the name of a structural tag, then whitespace must be used, eg: { ifUserIsAllowed }, and not {ifUserIsAllowed}

if/else, unless {if lookup} true {else} false {/if}

A simple conditional, with optional else block. The tag must start with {if, and be closed with a matching {/if} tag.

# (each) {# loopVar}{var}{/#}

The loop iterator, will iterate over the given context variable, repeating the block body.

Template:

{# people}
  {name}, {country}
{/#}

Context:

{people: [{name: 'Joe', country: 'CA'}, {name: 'Jane', country: 'US'}]}

Result:

  Joe, CA
  Jane, US

> (partial) {> addrress}

extends

body

Coffeescript Precompiler

One killer feature of nct templates is the ability to use valid coffeescript as a source for nct templates. By utilizing templates as code, otherwise verbose templates can be easily refactored and reused.

npm loves you