tempura

simple templating library in javascript.

npm install tempura
4 downloads in the last month

tempura — simple templating library in javascript

tempura is templating library inspired by mustache.js and tempo.

Some features are similar with mustache.js.

Usage

Below is quick example how to use tempura:

var data = {
  name: 'Joe',
  calc: function () {
    return 200 + 4000;
  }
};
var tmpl = '{{name}} spends {{calc}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // Joe spends 4200

See jsfiddle.

Differences Between tempura and mustache.js

Pipeline Processing

The most unique feature in tempura is the pipeline processing. This feature is useful for formatting and coversion.

var data = {
  name: 'Joe',
  calc: function () {
    return 200 + 4000;
  },
  dollar: function (value) {
    var regex = /(\d+)(\d{3})/;
    var s = String(value);
    while (s.match(regex)) {
      s = s.replace(regex, '$1' + ',' + '$2');
    }
    return '$' + s;
  }
};
var tmpl = '{{name}} spends {{calc|dollar}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // Joe spends $4,200

See jsfiddle.

More than one pipe function are available.

var data = {
  name: 'Joe',
  yeah: function (value) {
    return value + '!';
  },
  enclose: function (value) {
    return '[' + value + ']';
  }
};
var tmpl = '{{name|yeah|enclose}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // [Joe!]

See jsfiddle.

You can define global pipe functions.

tempura.mergeSettings({
  pipes: {
    yeah: function (value) {
      return value + '!';
    },
    enclose: function (value) {
      return '[' + value + ']';
    }
  }
});

var data = { name: 'Joe' };
var tmpl = '{{name|yeah|enclose}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // [Joe!]

See jsfiddle.

Data Context Access

tempura provides following special identifiers to access data context.

  • $root : the reference to the root data context
  • $parent : the reference to the parent data context
  • $this : the reference to the current object

Given this object:

var data = {
  rootName: 'root',
  parent: {
    parentName: 'parent',
      children: [
        'child 1',
        'child 2'
      ]
    },
};

And this template:

<ul>
{{#parent}} 
  {{#children}}
  <li>{{$root.rootName}}/{{$parent.parentName}}/{{$this}}</li>
  {{/children}}
{{/parent}}
</ul>

We'll get this output:

<ul>
  <li>root/parent/child 1</li>
  <li>root/parent/child 2</li>
</ul>

See jsfiddle.

You can also use special identifiers in a function.

var data = {
  rootName: 'root',
  parent: {
    parentName: 'parent',
    child: {
      childName: 'child',
      path: function () {
        return [this.$root.rootName,
                this.$parent.parentName,
                this.childName].join('/');
      }
    }
  },
};
var tmpl = 'path: {{parent.child.path}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // path: root/parent/child

See jsfiddle.

Error Handling

tempura can handle the value missings. This feature is useful for debugging.

tempura.mergeSettings({
  noSuchValue: function (name) {
    console.warn('the value "' + name + '" is missing');
    return undefined;
  },
  noSuchPipe: function (name, index, value) {
    console.warn('the pipe "' + name + '" is missing');
    return value;
  }
});

var data = { name: 'Joe' };
var tmpl = '{{name|unknownPipe1}} is {{unkonwnValue|unknownPipe2}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // Joe is

See jsfiddle.

tempura provides a hook point to handle all values before and after applying pipeline functions. It's means you can check or convert erroneous values. (By the way, tempura converts undefined values to empty string by default preRender function.)

tempura.mergeSettings({
  preRender: function (value, pipe) {
    var result = pipe(value);
    return result === null ? '***' : result;
  }
});

var data = { name: null };
var tmpl = 'name is {{name}}';
var result = tempura.prepare(tmpl).render(data);

console.log(result); // name is ***

See jsfiddle.

Others

Currently, tempura doesn't support following features, which mustache.js has:

  • Higher Order Sections
  • View Partials
  • Streaming
  • Pragmas
npm loves you