Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including mustacher with all npm packages installed. Try it out:

var mustacher = require("mustacher")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

mustacher v0.2.6

Perfect for templating eZPublish, Magento, Drupal... CMS models

Mustacher Built with Grunt

MIT License NPM version NPM downloads build coverage

Designed for fit my own needs to build HTML static pages to be incorpored inside a website based on Magento, eZPublish or Drupal templates

It provide an easy way to include handlebar's partials files inside HTML template page with a minimal list of helpers like include, repeat (loop), or, and, livereload...

Install

npm install mustacher --save

Exposed helpers

inline
blocks

Examples

const fs = require('fs');
const path = require('path');
const mustacher = require('mustacher');

// variables at root level touched by any helper
const context = { private: 'as @root.private' };

// default config
const config = {
  cwd: __dirname,
  delimiter: {
    ldim: '{{',
    rdim: '}}',
  },
  partials: {
    ext: '.hbs',
    src: 'partials',
  },
};

const templateFile = path.join(__dirname, 'index.html');
const outputfile = path.join(__dirname, '..', 'public', 'index.html');

const fsOptions = { encoding: 'utf8' };
const templateContent = fs.readFileSync(templateFile, fsOptions);
const compiledOutput = mustacher(templateContent, <context>, <config>);
fs.writeFileSync(outputfile, compiledOutput, fsOptions);

inline

$include

<div class="part">
  {{$include 'relative/to/root/path/to/template'}}
</div>

$css & $js helper

<head>
  ... {{$css 'path/to/css/file'}}
  <!-- include inline -->
  {{$css '__build__/path/to/css/file' true}} ...
</head>
    <div id="main-footer">
    ...
    </div>
    {{$js 'path/to/js/file'}}
</body>

$image (default width: 300)

<div class="image">
  {{$image}}
</div>
<div class="image">
  {{$image 300}}
</div>
<div class="image">
  {{$image 300 200}}
</div>

$timestamp

<img src="my/file.png?{{$timestamp}}" alt="" title="" />
<img src="my/file.png?{{$timestamp 20}}" alt="" title="" />

$livereload

<div id="footer">
  {{$livereload 1337}}
</div>

$random

<span>
  <b>{{$random 1 31}}</b>
  <strong>Juanary</strong>
  <em>1970</em>
</span>
<span>{{$random 0 1 true}}</span>

literal

$ldim

{{$ldim}}toto {{$ldim}}toto{{$rdim}}

$rdim

toto{{$rdim}} {{$ldim}}toto{{$rdim}}

$css

{{$css 'path/to/file'}} {{$css 'path/to/file.min'}} {{$css 'path/to/file.min'
'{"media":"print,projection,screen"}'}}

$js

{{$js 'path/to/file'}} {{$js 'path/to/file.min'}} {{$js 'path/to/file.min'
'{"data-main":"main.js"}'}}

blocks

#repeat

<ul>
  {{#repeat 4}}
  <li class="{{class}}">
    <a href="" alt="{{count}} of {{of}}">item </a>
    <ul>
      {{#repeat}}
      <li class="{{#if @first}}first{{/if}}">
        <span>sub item {{@../index}}/{{@index}}</span>
      </li>
      {{/repeat}}
    </ul>
  </li>
  {{/repeat}}
</ul>

#and

{{#and true false ...}}
<span>fail</span>
{{else}}
<span>success</span>
{{/and}}

#or

{{#or true false ...}}
<span>success</span>
{{else}}
<span>fail</span>
{{/or}}

#equal

{{#equal 'toto' 'blague'}}
<span>fail</span>
{{else}}
<span>success</span>
{{/equal}}

Issues

not yet implemented

  • Lorem Ipsum

Dependents

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free