Add inheritance (block/extends) to lodash/underscore template engine
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Rename Jun 27, 2016
.gitignore add test Jun 24, 2016
LICENSE Rename Jun 27, 2016
README.md fix typo Oct 14, 2016
_config.yml Set theme jekyll-theme-leap-day Dec 28, 2016
lodash-template-extras.js Rename Jun 27, 2016
package.json Rename Jun 27, 2016

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){
    str.toUpperCase();
})
<!-- page -->
<div>Hello <% @upper(name)%>!</div>

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

<div>Hello WORLD!</div>