Documentation - JS

Quick start

 
    <script src="domtempl.js"></script>

Reading the template

 
    var l = new DOMtempl(document);

 
    var l = new DOMtempl('<html><p data-var="foo"></p></html>', DOMtempl.FRAGMENT);

Reading variables defined/expected by template

 
    var l = new DOMtempl('<html><p data-var="foo">Boo</p></html>', DOMtempl.FRAGMENT);
 
    console.log(l.vars);
    //{ "foo" : "Boo" }

Writing variables

 
    l.assign("foo", "Hello world");

You can also assign variables by accessing the vars public property,

 
    l.vars['foo'] = "Hello world";

has the same effect.

Writing output

 
    l.reflow();

will update the DOM with new values from vars, if you need HTML as string, you can call

 
    var html = l.dump();
 
    console.log(html);

Complete example

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="domtempl.js"></script>
    </head>
    <body>
        <h1 data-var="title">
            Page Title
        </h1>
        <script>
            var t = new DOMtempl();
            alert(t.vars['title']); // this will output "Page Title"
            t.vars['title'] = 'Custom Title';
            t.reflow(); //this will change the H1 above to "Custom Title"
        </script>
    </body>
</html>