altr is a lightweight templating engine that is backed by the native DOM.
Rather than blowing away large portions of the DOM and recreating those nodes with each update, altr modifies only the nodes that have changed. As a result of this approach, altr is performant and a good citizen of the DOM: altr updates do not interfere with DOM event listeners or CSS3 animations.
run npm install altr
,
then simply var altr = require('altr')
.
download altr.js and include it in your html before your other JavaScript files
<script type="text/javascript" src="/path/to/altr.js"></script>
var el = document.getElementById('root')
, template = altr(el)
template.update({
name: "world"
, list: [1,2,3]
})
//later
template.update(new_state)
<div id="root">
<h1>hello, {{ name }}!</h1>
<ul altr-for="item in list">
<li altr-text="item"></li>
</ul>
</div>
##Tags:
altr currently supports these tags: if
, for
, value
, html
, attr
, and
text
. It is under active development, more will be added soon.
##Values:
You can also insert values into text nodes or non altr-* attributes using the
syntax: {{ dot.path.to.value }}
.
I have only written an addition filter so far, but the API is functional. They
look like {{ num|add(5) }}
.
Filters are through streams, so they can be used synchronously, asynchronously, or to update values over time (e.g. a countdown or transition).