Crude string templating without any syntax, just semantic HTML.
Disclaimer: This is old, slow, buggy and not recommended. It's here just for historical reasons. It was my first public library and published on http://microjs.com/.
Get this as a string,
<div id="austrianeconomics">
<h1 class="title"></h1>
<ul id="theories">
<li>
<span class="author"></span>
<span>
<a class="theory"
data-bind-here="href"
data-bind-there="url">
</a>
</span>
</li>
</ul>
</div>
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.render(template, data)
get this back:
<div id="austrianeconomics">
<h1 class="title"></h1>
<ul id="theories">
<li>
<span class="author">Menger</span>
<span>
<a class="theory"
data-bind-here="href"
data-bind-there="url"
href="/subj">
Subjective value
</a>
</span>
</li>
<li>
<span class="author">Hayek</span>
<span>
<a class="theory"
data-bind-here="href"
data-bind-there="url"
href="/abct">
Austrian Business Cycle Theory
</a>
</span>
</li>
<li>
<span class="author">Kirzner</span>
<span>
<a class="theory"
data-bind-here="href"
data-bind-there="url"
href="/entre">
Sheer ignorance and entrepreneurship
</a>
</span>
</li>
</ul>
</div>
- 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
- Basic optmization
- Read some
data-
attr to see in which element arrays of data will duplicate
npm install tempreites
Or download the file and include it anywhere.
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: true
}
Tempreites.render(template, data)
Use a class
or an id
at the target element with the value of the key in your data
object.
<h1 class="name"></h1>
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.
<div id="name">
<h1>
<span class="last"></span>, <span class="first"></span></h1>
</h1>
</div>
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.
<div id="sons">
<p class="name"></p>
</div>
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 |
:
<header>
<h1 id="name"></h1>
<img data-bind="url -> src | name -> alt">
</header>
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.
<div id="miyamoto" data-show-if="show">
<ul class="sons">
<li class="name" data-show-if="show"></li>
</ul>
</div>
Call the compile
function to get a pre-compiled template to which you can just pass the data later.
var tpr = Tempreites.compile('<div class="u"></div>')
tpr.render({u: 'a'})
tpr.render({u: 'b'})
Inspired by Plates and Transparency, but simplified and more useful.
Written with regular expressions, como se fazia antigamente lá na roça.