Templating plugin

This plugin allows you to easily theme your GuideChimp, replace the default templates with your custom templates.

Templating engine

GuideChimp template engine has a number of features to help applying arbitrary data to your templates:

• Nested data and arbitrary Javascript ({{currentStep.title}})
• Registration of event handlers (@click="next()")
• Conditional evaluation (if="condition")
• Looping (for="(step, index) in {{step}}")
• Updates the element’s innerHTML with html attribute (html="{{title}}")
• Inserting variables containing HTMLElement ({{document.createElement('div')}})

Nested data and arbitrary Javascript ({{currentStep.title}})

{{...}} blocks can be in attribute values and in HTML content.When used in an attribute value, the retrieved data is converted to a string before being added to the DOM. When used in element content, {{...}} blocks can return either strings or return DOM elements, in which case the DOM element will be added to the tree.

Simple use:

<div class="gc-title">{{title}}</div>

Using javascript expressions:

<div class="gc-navigation-next {{ (!nextStep || !showNavigation) ? 'gc-hidden': '' }}"></div>

Registration of event handlers (@click="next()")

You can use the @eventName attribute to listen events and run some function when they’re triggered.

<div class="gc-navigation-next"
     @click="next"></div>

The template above is equal to:

const next = ()=>{ console.log('User clicked Next') };

const el = document.createElement('div');

el.classList.add('gc-navigation-next');

el.addEventListener('click', ()=>{
  return next();
});

Sometimes you need to pass an event object, it is available in the $event variable

<div class="gc-navigation-next"
     @click="next($event)"></div>

const next = (e)=>{ console.log(e) };

Conditional evaluation (if="condition")

If an element contains an "if" attribute, then its value will be evaluated, and if the result is "false", then the entire element will be removed from the tree. This allows for simple if statements.

<div if="title"
     class="gc-title">{{ title }}</div>

You can also use elseif and else