bramstein/gist:955508

## gistfile1.html
<!doctype html>
<html>
    <head>
        <script src="mustache.js"></script>
        <script src="../1.js"></script>
        <script src="../2.js"></script>
        <script src="../3.js"></script>
        <script>
            window.onload = function () {
                var e1 = document.getElementById('t1'),
                    t1 = e1.innerHTML;

                e1.innerHTML = Mustache.to_html(t1, v1);

                var e2 = document.getElementById('t2'),
                    t2 = e2.innerHTML;

                // Note we need to introduce an object here as
                // mustache only works on objects
                e2.innerHTML = Mustache.to_html(t2, {items: v2});

                var e3 = document.getElementById('t3'),
                    t3 = e3.innerHTML;

                // Note we need to add a function to the object
                // to properly encode values within an attribute.
                v3.encode = function () {
                    return function (text, render) {
                        return encodeURIComponent(render(text));
                    };
                };

                e3.innerHTML = Mustache.to_html(t3, v3);
            };
        </script>
    </head>
    <body>
        <div id="t1">
            Page {{pageNumber}} of {{pageTotal}}.
        </div>
        <div id="t2">
            <ul>
                {{#items}}
                    <li>
                        <h1><a href="{{url}}">{{title}}</a></h1>

                        {{#author}}
                        <p>By {{author}}</p>
                        {{/author}}

                        {{#thumb}}
                        <img src="{{thumb}}"/>
                        {{/thumb}}

                        <!-- Note: Mustache uses the same syntax for conditionals and loops, so checking if a property
                             is available and then looping over it seems impossible. A consequence is that items without
                             children have an empty ul element. -->
                        <ul>
                        {{#children}}
                            <li>
                                <h2><a href="{{url}}">{{title}}</a></h2>
                                {{#author}}
                                <p>By {{author}}</p>
                                {{/author}}

                                {{#thumb}}
                                <img src="{{thumb}}"/>
                                {{/thumb}}
                            </li>
                        {{/children}}
                        </ul>
                    </li>
                {{/items}}
            </ul>
        </div>
        <div id="t3">
            <a href="http://www.twitter.com/?status={{#encode}}Check out {{title}} at {{url}}{{/encode}}">Tweet this</a>
        </div>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="mustache.js"></script>
	<script src="../1.js"></script>
	<script src="../2.js"></script>
	<script src="../3.js"></script>
	<script>
	window.onload = function () {
	var e1 = document.getElementById('t1'),
	t1 = e1.innerHTML;

	e1.innerHTML = Mustache.to_html(t1, v1);

	var e2 = document.getElementById('t2'),
	t2 = e2.innerHTML;

	// Note we need to introduce an object here as
	// mustache only works on objects
	e2.innerHTML = Mustache.to_html(t2, {items: v2});

	var e3 = document.getElementById('t3'),
	t3 = e3.innerHTML;

	// Note we need to add a function to the object
	// to properly encode values within an attribute.
	v3.encode = function () {
	return function (text, render) {
	return encodeURIComponent(render(text));
	};
	};

	e3.innerHTML = Mustache.to_html(t3, v3);
	};
	</script>
	</head>
	<body>
	<div id="t1">
	Page {{pageNumber}} of {{pageTotal}}.
	</div>
	<div id="t2">
	<ul>
	{{#items}}
	<li>
	<h1><a href="{{url}}">{{title}}</a></h1>

	{{#author}}
	<p>By {{author}}</p>
	{{/author}}

	{{#thumb}}
	<img src="{{thumb}}"/>
	{{/thumb}}

	<!-- Note: Mustache uses the same syntax for conditionals and loops, so checking if a property
	is available and then looping over it seems impossible. A consequence is that items without
	children have an empty ul element. -->
	<ul>
	{{#children}}
	<li>
	<h2><a href="{{url}}">{{title}}</a></h2>
	{{#author}}
	<p>By {{author}}</p>
	{{/author}}

	{{#thumb}}
	<img src="{{thumb}}"/>
	{{/thumb}}
	</li>
	{{/children}}
	</ul>
	</li>
	{{/items}}
	</ul>
	</div>
	<div id="t3">
	<a href="http://www.twitter.com/?status={{#encode}}Check out {{title}} at {{url}}{{/encode}}">Tweet this</a>
	</div>
	</body>
	</html>