Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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>

About

Add inheritance (block/extends) to lodash/underscore template engine

Topics

Resources

License

Releases

No releases published

Packages

No packages published