lodash-template-extras
v1.0.0
Published
Add inheritance to lodash/underscore template engine
Downloads
183
Maintainers
Readme
Lodash Template Extras
Add inheritance to lodash/underscore template engine.
Download
Installation
In browser:
<script src="lodash.js"></script>
<script src="lodash-template-extras.js"></script>
In Node.js:
var _ = require('lodash');
require('lodash-remplate-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>