Skip to content
Wax is an extension for Mustache.js, it enables the use of formatters inside of Mustache expressions in a similar fasion of Angular filters.
JavaScript HTML
Branch: master
Clone or download
jvitela jvitela
Latest commit 93c176c Sep 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fixed build Apr 21, 2019
src Fixed build Apr 21, 2019
test Fixed build Apr 21, 2019
.gitattributes 🎉 Added .gitattributes Dec 31, 2014
.gitignore issue #1 Apr 21, 2019
.travis.yml install mustache dependency Jun 4, 2019
LICENSE Initial commit Dec 31, 2014
README.md Added npm badge Jun 4, 2019
bower.json issue #1 Apr 21, 2019
humans.txt Initial commit Dec 31, 2014
package-lock.json Fixed security vulnerability in one of the dependencies. Sep 18, 2019
package.json Fixed security vulnerability in one of the dependencies. Sep 18, 2019
webpack.config.js Fixed build Apr 21, 2019

README.md

Mustache-Wax

Travis npm package

Wax is an extension for Mustache.js, it enables the use of formatters inside of Mustache expressions in a similar fasion of Angular filters.

This extension requires that String.prototype.trim() method exists, you can grab a Polyfill from MDN site:

Installation

npm install @jvitela/mustache-wax

Package usage

	const Mustache = require('mustache');
	const Wax = require('@jvitela/mustache-wax');

	Wax(Mustache);
	Mustache.Formatters = { ... };
	Mustache.render(...);

Or simply pass the formatters as second argument of Wax function

	const Mustache = require('mustache');
	const Wax = require('@jvitela/mustache-wax');

	Wax(Mustache, { 
	    ... // Formatters
	});
	Mustache.Formatters; // Formatters will still be accessible here
	Mustache.render(...);

Quick example

First you need to define some filters:

	Mustache.Formatters = {
		"uppercase": function (str) {
			return str.toUpperCase();
		},
		"lpad": function (str, num, sep) {
			sep = sep || " ";
			str = "" + str;
			var filler = "";
			while ((filler.length + str.length) < num) { filler += sep };
			return (filler + str).slice(-num);
		},
		"date": function (dt) {
			var lpad  = Mustache.Formatters.lpad, 
				day   = lpad(dt.getDate(), 2, "0"),
				month = lpad(dt.getMonth()+1, 2, "0");
			return  day + "/" + month + "/" + dt.getFullYear();
		}
	};

Then create a template and pass some data to render:

	Mustache.render(
		"{{ name | uppercase }}, {{ dob | date }}, {{ ssnum | lpad : 10 : '0' }}", 
		{
			name: 	"john doe",
			dob: 	new Date(1981, 2, 24),
			ssnum:  12345
		}
	);

Result:

	JOHN DOE, 24/03/1981, 0000012345

A formatter is a function that modifies the value of an expression for display to the user. They are used in templates and it is easy to define your own formatters.

Using formatters in templates

Formatters can be applied to expressions in templates using the following syntax:

{{ expression | formatter }}

Formatters can be applied to the result of another formatter. This is called "chaining" and uses the following syntax:

{{ expression | formatter1 | formatter2 | ... }}

Formatters may have arguments. The syntax for this is

{{ expression | formatter : argument1 : argument2 : ... }}

Arguments can be either an integer, a real, a string or another expression. Integer arguments example:

  • 123
  • -123
  • +123

Real arguments example:

  • 1.2
  • 0.1
  • .1
  • -1.2
  • -.1

String arguments example:

  • "Hello World"
  • 'Hello World'
  • 'Hello "World"'
  • "Hello 'World'"

Chaining formatters and passing arguments

For example, assuming we have the following formatter and data:

	Mustache.Formatters = {
		"add": function (one, two) {
			return one + two;
		}
	}

	var data = {
		ten:  	10,
		twenty: 20
	};

We could use the following templates

	{{ ten | add: 5}}
	{{ twenty | add: 5.25 | add:-.25 }}
	{{ ten | add : 3.14159 | add : twenty | add:-3}}

The result will be:

	15
	25
	30.14159
You can’t perform that action at this time.