awinterman / altr Goto Github PK

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