Mustache.js

 Mustache.js is KISS(keep it simple stupid) Logic-less template engine quite useful when writing web applications.
Only thing you have to do is add the js file and you can use your JSON data with simple {{var}} in your file, for example
//as json data
{
test:"mustache",
text:"hello world"
}
you only have to write
//in html part
This is my first test of {{test}} and i want to say {{text}}.
it will be render as "This is my first test of mustache and i want to say hello world."

For looping data we can use {{#array}}..{{/array}} suppose we have
//as json data
{
array: [
{qty: "One", item:"Apple"},
{qty: "Two", item:"Balls"},
{qty: "Tree", item:"Cats"}
]
}
Then we can show all three key values of as
{{#array}}
We have {{qty}}: {{item}},
{{/array}}..

We can also include files by {{>file_name}} i we have recurring use of a part in the file.

You can try an interactive demo here: http://mustache.github.com/#demo

Post a Comment