Lodash Template Extras

Add inheritance to lodash/underscore template engine.

Download

Last verison

Installation

In browser:

<script src="lodash.js"></script>
<script src="lodash-template-extras.js"></script>

Using npm:

$ npm i lodash-template-extras

In Node.js:

var _ = require('lodash');
require('lodash-template-extras')(_);

Usage

Naming templates

//add a template
_.templateEx.add('layout', ''
    + '<block name="head">'
        + '<h1>Foo</h1>'
    + '</block>'
    + '<block name="body"/>');

//add some templates
_.templateEx.add({
    layout: '<block name="head">'
                 + '<h1>Foo</h1>'
             + '</block>'
             + '<block name="body"/>',
     page: '<% @extends("layout")%>'
            + '<append name="head">'
                + '<p>Hello world!</p>'
            + '</append>'
});

//template can have alias
_.templateEx.add({
    'long/long/name': '<% @alias("short")%>'
                    + '<h1><%=h1%></h1>'
});

Use template

_.templateEx.add({
    hello: '<h1>Hello <%=name%>!</h1>'
});

_.templateEx('hello',{
    name: 'world'
});
// ➜ <h1>Hello world!</h1>

Inheritance

<!-- layout -->
<div id="header">
    <block name="header">
        <h1>Foo</h1>
    </block>
</div>
<div id="main">
    <block name="main"/>
</div>

<!-- page -->
<% @extends("layout")%>
<prepend name="header">
    <i>:)</i>
</prepend>
<append name="header">
    <h2>Hello world!</h2>
</append>
<overrid name="main">
    <p>bar</p>
</overrid>

_.templateEx('page'); compiles to:

<div id="header">
    <i>:)</i>
    <h1>Foo</h1>
    <h2>Hello world!</h2>
</div>
<div id="main">
    <p>bar</p>
</div>

Include

<!-- page -->
<div id="header"></div>
<div id="main"></div>
<% @include("footer")%>

<!-- footer -->
<div id="footer"></div>

_.templateEx('page'); compiles to:

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

Helper

_.templateEx.addHelper('upper', function(str){
    return str.toUpperCase();
})

<!-- page -->
<div>Hello <% @upper(name)%>!</div>

_.templateEx('page', {name: 'world' }); compiles to:

<div>Hello WORLD!</div>