bramstein/gist:955511

## gistfile1.html
<!doctype html>
<html>
    <head>
        <script src="tempo.js"></script>
        <script src="../1.js"></script>
        <script src="../2.js"></script>
        <script src="../3.js"></script>
        <script>
            window.onload = function () {
                Tempo.prepare('t1').render(v1);
                Tempo.prepare('t2').render(v2);
                Tempo.prepare('t3').render(v3);
            };
        </script>
    </head>
    <body>
        <div id="t1" data-template>
            Page {{pageNumber}} of {{pageTotal}}.
        </div>
        <div id="t2">
            <ul>
                <li data-template>
                    <h1><a href="{{url}}">{{title}}</a></h2>
                    <!-- Simple conditionals are not there, apart from pattern matching, which will
                         explode with more than a handfull of properties that are optional. -->
                    <p>{{author}}</p>
                    <!-- Doesn't seem to be an easy way to do conditionals except for pattern matching. Tempo however does give
                         an option to have default values for attributes. Nice. -->
                    <img src="/images/blank.gif" data-src="{{thumb}}"/>
                    <ul>
                        <li data-template="children">
                            <h2><a href="{{url}}">{{title}}</a></h2>
                            <p>{{author}}</p>
                            <img src="/images/blank.gif" data-src="{{thumb}}"/>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="t3">
            <!-- doesn't seem to be a way to influence encoding, other than doing it before expanding the template -->
            <a href="http://www.twitter.com/" data-href="http://www.twitter.com/?status=Check out {{title}} at {{url}}">Tweet this</a>
        </div>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="tempo.js"></script>
	<script src="../1.js"></script>
	<script src="../2.js"></script>
	<script src="../3.js"></script>
	<script>
	window.onload = function () {
	Tempo.prepare('t1').render(v1);
	Tempo.prepare('t2').render(v2);
	Tempo.prepare('t3').render(v3);
	};
	</script>
	</head>
	<body>
	<div id="t1" data-template>
	Page {{pageNumber}} of {{pageTotal}}.
	</div>
	<div id="t2">
	<ul>
	<li data-template>
	<h1><a href="{{url}}">{{title}}</a></h2>
	<!-- Simple conditionals are not there, apart from pattern matching, which will
	explode with more than a handfull of properties that are optional. -->
	<p>{{author}}</p>
	<!-- Doesn't seem to be an easy way to do conditionals except for pattern matching. Tempo however does give
	an option to have default values for attributes. Nice. -->
	<img src="/images/blank.gif" data-src="{{thumb}}"/>
	<ul>
	<li data-template="children">
	<h2><a href="{{url}}">{{title}}</a></h2>
	<p>{{author}}</p>
	<img src="/images/blank.gif" data-src="{{thumb}}"/>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	<div id="t3">
	<!-- doesn't seem to be a way to influence encoding, other than doing it before expanding the template -->
	<a href="http://www.twitter.com/" data-href="http://www.twitter.com/?status=Check out {{title}} at {{url}}">Tweet this</a>
	</div>
	</body>
	</html>