altr

README.md

npm install altr
26 downloads in the last day
27 downloads in the last week
247 downloads in the last month

What is altr and why would I use it?

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.

Install:

if you are using browserify (you should)

run npm install altr, then simply var altr = require('altr').

otherwise

download altr.js and include it in your html before your other JavaScript files

<script type="text/javascript" src="/path/to/altr.js"></script>

Basic Usage:

js:

var el = document.getElementById('root')
  , template = altr(el)

template.update({
    name: "world"
  , list: [1,2,3]
})

//later
template.update(new_state)

html:

<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 }}.

Filters:

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).

npm loves you