DEMO
Comparison with Mustache
Tempreites
Crude string templating without any syntax, just semantic HTML.
Usage
Get this as a string,
attach data to it,
var data = title: 'Austrian economists and their theories' theories: author: 'Menger' theory: 'Subjective value' url: '/subj' author: 'Hayek' theory: 'Austrian Business Cycle Theory' url: '/abct' author: 'Kirzner' theory: 'Sheer ignorance and entrepreneurship' url: '/entre' tempreites
get this back:
Menger Subjective value Hayek Austrian Business Cycle Theory Kirzner Sheer ignorance and entrepreneurship
Features
- Semantic data binding - No need for <%=foo%> or {{foo}} assignments
- Collection rendering - No need for hand-written loops
- Valid HTML templates - Write templates as a part of the HTML, in plain HTML
- View logic in JavaScript - No crippled micro-template language, just plain JavaScript functions
TODOs:
- Basic optmization
- Read some
data-
attr to see in which element arrays of data will duplicate
Installation
npm install tempreites
Or download the file and include it anywhere.
Documentation
Considering a data
object like this:
var data = name: 'Miyamoto' link: '/miyamoto' completeName: first: 'Shigeru' last: 'Miyamoto' sons: name: 'Mario' show: true name: 'Luigi' show: false show: trueTempreites
Binding values
Use a class
or an id
at the target element with the value of the key in your data
object.
Nested objects
Use a class
or an id
at some element with the value of the parent key in your data
object, then use a class
or id
with the child key anywhere inside the parent element.
,
Nested lists
Use a class
or an id
at the element immediattely before the element you want to be repeated with the list values, then use a class
or id
with the child key anywhere inside it.
Binding values to attributes
Use the data-bind
attribute with the special syntax "javascriptObjectAttrName - > htmlElementAttrNameToBindTo". If you want to bind to more than one attr, write the other bindings at the same data-bind
, separated by a |
:
Conditional showing of elements
Use the data-show-if
attr naming a key at the data
object which will be tested for deciding if the element
will be shown or not.
Pre-compiling templates
Call the compile
function to get a pre-compiled template to which you can just pass the data later.
var tpr = Tempreitestprtpr
Inspired by Plates and Transparency, but simplified and more useful.
Written with regular expressions, como se fazia antigamente lá na roça.