scope: shell

feature: dust-view-engine

service: view-engine

path: /modules/core/ui/services/dust-view-engine.js

source: https://github.com/DecentCMS/DecentCMS/blob/master/modules/core/ui/services/dust-view-engine.js

DustViewEngine

Kind: global class

• DustViewEngine
  • new DustViewEngine()
  • .load(templatePath, done) ⇒ function

new DustViewEngine()

A view engine using Dust templates. http://akdubya.github.io/dustjs/ https://github.com/linkedin/dustjs/wiki/Dust-Tutorial

The view engine exposes by default the standard helpers: https://github.com/linkedin/dustjs-helpers

Helpers

T - Makes the enclosed string localizable.

{@t}Text to localize{/t}

Shape

It adds a 'shape' helper that enables the rendering of DecentCMS shapes. The shape helper takes a 'shape' parameter that should point to the shape object to render. If a shape is not provided, the current view model is used (equivalent to '.'). Optional parameters are tag and class, which specify a HTML tag that will surround the shape rendering. Parameters with a name that is prefixed with 'data-' are copied onto the surrounding tag.

The following tag creates a 'footer' shape to be rendered with the 'footer' object as its view model. It will be enclosed in a footer tag with a main-footer class.

{@shape shape=footer tag="footer" class="main-footer"/}

The 'shape' attribute, if specified, points to the model object representing the shape.

The 'name' attribute, if specified, tells the rendering engine the base template name to use when looking for the best template to render the shape.

Other parameters are copied onto the shape object, and can be used from the template that will be used to render it. If those parameters exist, that creates a shape object even when one didn't exist before. This means that the shape tag is a very simple way to structure a complex template into multiple smaller and simpler ones.

For instance, the following tag will create a 'tweet' template and render it in-place:

{@shape name="tweet" text="{site.name} {episode} - {title|s}" url="{temp.baseUrl}/{id}" via="{site.twitter}" /}

If the theme's views folder contains a tweet.tl template, it will get rendered:

<a href="https://twitter.com/intent/tweet?text={text|uc}&via={via|uc}&url={url|uc}" target="_blank">
 <span class="badge badge-dark share-twitter">
   <i class="fab fa-twitter"></i>
   <span class="share-text">Tweet</span>
 </span>
</a>

Zone

It adds a 'zone' helper that enables the rendering of special "zone" shapes that can be used as target for dynamically placing other shapes.

Zones should have at least a name attribute. Like shapes, an optional tag attribute enables for the zone rendering to be surrounded by a tag if the zone is not empty. Additional attributes get added to that tag if it's defined.

{@zone name="main" tag="div" class="container"/}

Style

Registers a style sheet. Use the non-minimized name, without extension, as the name parameter.

{@style name="style"/}

Styles

Renders the list of registered styles.

{@styles/}

Script

Registers a script. Use the non-minimized name, without extension, as the name parameter.

{@script name="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"/}

Scripts

Renders the list of registered scripts.

{@scripts/}

Meta

Registers a meta tag. name: the name of the tag value: the value of the tag (rendered as the content attribute) Additional attributes will be rendered as-is.

{@meta name="generator" value="DecentCMS"/}

Metas

Renders registered meta tags.

{@metas/}

Link

Registers a link tag, pointing to a relative resource. For styles, use the style helper instead. rel: specifies the relationship to the document type: specifies the MIME type href: the URL of the linked content Additional attributes will be rendered as-is.

{@ link rel="icon" type="image/png" href="/media/favicon-128.png" sizes="128x128"/}

Links

Renders registered link tags.

{@links/}

Date

Formats a date using the Luxon library. value: the date to format. format: the format string to use (see https://moment.github.io/luxon/docs/manual/formatting.html for reference).

{@date value=date format="EEEE, MMMM d, yyyy"/}

Dump

A filter to pretty-print an object, skipping its 'temp' property. This is particularly useful to dump the current content and debug templates. Object graph loops are removed before the dump is performed.

{meta|dump|s}
{.|dump|s}

Note: you may need to install Node with full ICU support, in order to format with locales other than 'en-US'.

Log

A filter to dump the object to the browser's console. This is useful to inspect the structure of an object using the rich UI of the browser's dev tools without upsetting the page's layout. Object graph loops are removed before the dump is performed.

{meta|log}
{.|log}

Plain

A filter that removes tags and newlines from an HTML source.

{body.html|plain}

First Paragraph

A filter that extracts the plain text from the first paragraph from an HTML string, or all the text before a <--more--> tag.

{body.html|firstp}

dustViewEngine.load(templatePath, done) ⇒ function

Loads the rendering function from the provided path.

Kind: instance method of DustViewEngine
Returns: function - The template function.