a tiny javascript template engine without any dependence.
- Cleaner grammer than
mustache
. - Without
with
statement in compiled function, recognized performance problems will be shielded. - More detailed error logging.
- Build-in
index
support when iterating an array. - Build-in
else if
support. - TODO: Customizable output filter plugin.
- TODO: More useful partial template than
mustache
. - TODO: Matching precompiled npm tool.
output the value of the key
in context data.
var data = {
"name": "eotic"
};
var tpl = eotic.compile("{{this.name}}");
tpl.render(data); // "eotic"
if there is no such key
in context data.
var tpl = eotic.compile("{{this.name}}");
tpl.render({}); // ""
Beginning with
this.
prefix, it will not throw errors likeunderscore
.
output the html-escaped value of the key
in context data.
var data = {
"name": "<h1> eotic </h1>"
};
var tpl = eotic.compile("{{@this.name}}");
tpl.render(data); // "<h1> eotic </h1>"
demo data
var data = {
a: true,
b: 1,
c: 0
};
表达式和值的对应demo
block | equal to | result | note |
---|---|---|---|
{{#this.a}} | if (this.a) | true | variable vs somevalue |
{{#this.b}} | if (this.b) | true | variable vs somevalue |
{{#this.b === true}} | if (this.b === true) | false | variable vs somevalue |
{{#this.b != true}} | if (this.b != true) | false | variable vs somevalue |
{{#this.b !== true}} | if (this.b !== true) | true | variable vs somevalue |
{{#this.a == this.b}} | if (this.a == this.b) | true | variable vs variable |
block | equal to | result | note |
---|---|---|---|
{{^this.a}} | else if (this.a) | true | variable vs somevalue |
{{^this.b}} | else if (this.b) | true | variable vs somevalue |
{{^this.b === true}} | else if (this.b === true) | false | variable vs somevalue |
{{^this.b != true}} | else if (this.b != true) | false | variable vs somevalue |
{{^this.b !== true}} | else if (this.b !== true) | true | variable vs somevalue |
{{^this.a == this.b}} | else if (this.a == this.b) | true | variable vs variable |
demo
var data = {
"number": 2
};
var tpl = eotic.compile("{{#this.number === 1}}"+
"number is 1"+
"{{^this.number === 2}}"+
"number is 2"+
"{{/}})";
tpl.render(data); // "number is 2"
var data = {
"show": false
};
var tpl = eotic.compile("{{#this.show}}"+
"show"+
"{{^}}"+
"hide"
"{{/}})";
tpl.render(data); // "hide"
array data
var data = {
name: "eotic",
features: [
"simple",
"standalone"
]
};
var tpl = eotic.compile("<ul>"+
"{{#this.features item key}}"+
"<li>{{key}}. {{this.name}} is {{item}}</li>"+
"{{/}}"+
"</ul>");
tpl.render(data);
// "<ul><li>0. eotic is simple</li><li>1. eotic is standalone</li></ul>"
object data
var data = {
features: {
"grammer": "simple",
"dependency": "standalone"
}
};
var tpl = eotic.compile("<ul>"+
"{{#this.features item key}}"+
"<li>{{key}}:{{item}}</li>"+
"{{/}}"+
"</ul>");
tpl.render(data);
// "<ul><li>grammer:simple</li><li>dependency:standalone</li></ul>"
var tpl = eotic.compile("{{!hello}}eotic");
tpl.render(); // "eotic"
you can see it everywhere in the code above.
- 2014-03-21
- initial version 1.0.0