bigot

v0.6.5

Published

4 years ago

A little 'moustache like' template engine but more semantic

0High
0Medium
0Low

firezenk

bigot template engine mousthache

Bigot

A little moustache inspired template engine but more semantic. Bigot is easy to learn, read and write.

How to install

As Node module

npm install bigot --save

As Bower component

bower install bigot

Or as Grunt plugin

npm install grunt-contrib-bigot --save-dev

How to use

######Reserved keywords: In order to be an engine of more semantic templates, Bigot use certain words to describe his actions, which shall therefore be reserved and may not be used as names or properties of objects/arrays.

This is the list of reserved keywords:

include
comment
if
else
loop
end
@

######Include Bigot:

Bigot = require("node_modules/bigot/lib/index.js");

######Render objects:

source = "<h1>{title}</h1><h6>{subtitle}</h6><p>{content}</p><p>2 + 3 = {func}</p>";

data = {title: "Hello World!", subtitle: "and hello Bigot!",
			content: "This is a Bigot test template", func: function() {return 2+3}};

console.log(Bigot.render(source, data));

output: <h1>Hello World!</h1><h6>and hello Bigot!</h6><p>This is a Bigot test template</p><p>2 + 3 = 5</p>

######Render including templates:

source = "{include header}<h1>{title}</h1><h6>{subtitle}</h6><p>{content}</p><p>2 + 3 = {func}</p>{include footer}";

data = {header: "./test/header.html", footer: "./test/footer.html", title: "Hello World!",
	subtitle: "and hello Bigot!", content: "This is a Bigot test template", func: function() {return 2 + 3;}};

console.log(Bigot.render(source, data));

output: <html><head><title>Bigot test</title></head><body><h1>Hello World!</h1><h6>and hello Bigot!</h6><p>This is a Bigot test template</p><p>2 + 3 = 5</p></body></html>

######Render arrays:

source = "<ul>{loop names}<li>{@}</li>{end names}</ul>";

data = {names: ["Abby","Matt","Jhon"]};

console.log(Bigot.render(source, data));

output: <ul> <li>Abby</li> <li>Matt</li> <li>Jhon</li> </ul>

######Render array of objects:

source = "<ul>{loop people}<li>{name}, {age}</li>{end people}</ul>";

data = {people: [{name: "Abby", age: "24"},
				{name: "Matt", age: "32"},
				{name: "John", age: "18"}]};

console.log(Bigot.render(source, data));

output: <ul> <li>Abby, 24</li> <li>Matt, 32</li> <li>John, 18</li> </ul>

######Render arrays into array of objects:

source = "<ul>{loop people}<li>{name}, {age} {loop sports}<span>{@}</span>{end sports}</li>{end people}</ul>";

data = {people: [{name: "Abby", age: "24", sports: ["hockey","curling"]},
				 {name: "Matt", age: "32", sports: ["futbol"]},
				 {name: "John", age: "18", sports: ["tennis","basketball"]}
				]};

console.log(Bigot.render(source, data));

output: <ul> <li>Abby, 24 <span>hockey</span><span>curling</span></li> <li>Matt, 32 <span>futbol</span></li> <li>John, 18 <span>tennis</span><span>basketball</span></li> </ul>

######Render object arrays into array of objects:

source = "<ul>{loop people}<li>{name}, {age} {loop activities}<span>{sport} and {hobby}</span>{end activities}</li>{end people}</ul>";

data = {people: [{name: "Abby", age: "24", activities: [{
											sport: "hockey",
											hobby: "drive"}] },
				 {name: "Matt", age: "32", activities: [{
											sport: "football",
											hobby: "pets"}] },
				 {name: "John", age: "18", activities: [{
											sport: "tennis",
											hobby: "videogames"}] }
				]};

console.log(Bigot.render(source, data));

output: <ul> <li>Abby, 24 <span>hockey and drive</span></li> <li>Matt, 32 <span>football and pets</span></li> <li>John, 18 <span>tennis and videogames</span></li> </ul>

######Render conditionals:

source = "{if showMe}<p>Hello {if canShow}<span>friend!</span>{else}<span>{name}!</span>{end canShow}</p>{else}<p>Bye!</p>{end showMe}";

data = {name: "Lightning McQueen",
      	showMe: function() {return true},
      	canShow: function() {return false}};
      
console.log(Bigot.render(source, data));

output: <p>Hello <span>Lightning McQueen!</span></p>

######Comments with Bigot:

source = "{comment Start of file}<h1>{title}</h1><h6>{subtitle}</h6>{comment Middle of file}<p>{content}</p><p>2 + 3 = {func}</p>{comment End of file}";

data = {title: "Hello World!", subtitle: "and hello Bigot!", content: "This is a Bigot test template", func: function() {return 2 + 3;}}
      
console.log(Bigot.render(source, data));

output: <h1>Hello World!</h1><h6>and hello Bigot!</h6><p>This is a Bigot test template</p><p>2 + 3 = 5</p>

######Helpers with Bigot:

source = "<h1>{toUpper title}</h1><h6>{toLower subtitle}</h6>";

data = {
      title: "Hello World!",
      subtitle: "and hello Bigot!",
      toUpper: function(text) {
        text = JSON.stringify(this);
        text = text.substring(1, text.length-1);
        return text.toUpperCase();
      },
      toLower: function(text) {
        text = JSON.stringify(this);
        text = text.substring(1, text.length-1);
        return text.toLowerCase();
      }  };      
      
console.log(Bigot.render(source, data));

output: <h1>HELLO WORLD!</h1><h6>and hello bigot!</h6>

######More samples? See test/test.coffee

Test

nodeunit test

Author

Jorge Garrido Oval

https://github.com/FireZenk

License

Bigot is released under the MIT license.

Published

Vulnerabilities

Links

Maintainers

Keywords