Skip to content

Latest commit

 

History

History
111 lines (81 loc) · 3.14 KB

README.md

File metadata and controls

111 lines (81 loc) · 3.14 KB

DADI Web

Mustache.js engine interface

npm (scoped) coverage Build Status JavaScript Style Guide semantic-release

This module allows Mustache.js templates to be used with DADI Web.

Installation

  • Add this module as a dependency:

    npm install dadi-web-mustachejs --save
    
  • Include it in the engines array passed to Web:

    require('@dadi/web')({
      engines: [
        require('dadi-web-mustachejs')
      ]
    })

Configuration

The following configuration parameters can be added to the global Web config file, under engines.mustache.

paths

Paths required by Mustache.

  • Format: Object
  • Default:
    {
      {
        helpers: 'workspace/utils/helpers'
      }
    }
    

Partials

Partials must be registered with Mustache before they can be used in a template. This library takes care of the registration for you, simply supply the path to your partials in the configuration option additionalTemplates.

pages/
|_ partials/
|_ |_ common/
|_ |_ |_ header.mustache
|_ contact-info.mustache
|_ home.mustache

Partials are referenced by their relative path, minus the file extension. After loading the above hierarchy of templates and partials, to include header.mustache from the page contact-info.mustache, you would use the following syntax:

{{> 'partials/common/header' }}

Helpers

To use helpers supply the path to your helpers in the main Web configuration file:

"engines": {
  "mustache": {
    "paths": {
      "helpers": "workspace/helpers"
    }
  }
}

Helpers can be individual JavaScript files within the specifed directory, or all in a single file.

Example:

/*
 * Returns the full name and price of the supplied product
 * The function receives the current context
 * Usage: {{ renderProduct }}
 */
module.exports = function () {
  return `helper: ${this.name} - £${this.price}`
}

This function is now available in your templates, to be used as follows. The function receives the current context, in the following example it receives a product object with properties name and price.

{{#products}}
  <li>{{renderProduct}}</li>
{{/products}}

More information

Read more in the Mustache documentation at https://github.com/janl/mustache.js

Something missing?

Open a pull request or raise an issue.