pure/gist:3752706

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
</head>
<body>

    <input type="button" id="add-book" value="Add book" />
    <div id="book-list">
    </div>
    <div class="templates" style="display:none;">
        <!-- add all templates, under an invisible div -->
        <div class="Book">
            <p class="Id">
            </p>
            <ul class="Authors">
                <li class="Author"><span class="Name"></span></li>
            </ul>
            <p class="Year">
            </p>
            <div class='book-footer'>
                <div class="rating-div">
                    Rating: <span class="Rating"></span>
                </div>
                <div>
                    Location: <span class="Location"></span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $('document').ready(function () {

            //instructions to compile
            var directive = {
                    '@class':'"Book"',
                    '@id':'book-#{Id}',
                    '.Year':'Year',
                    '.Rating':'Rating',
                    '.Location':'Location',
                    '.Author':{
                        'author<-Authors':{
                            '.Name':'author.Name'
                        }
                    }
                },
                //compile the template to a JS function
                compiled = $('.templates .Book').compile( directive );

            $('#add-book').click(function () {

                var jsonData = {
                        Id: 1,
                        Title:'Book_2',
                        Authors:[
                            {'Name':'Author_1'}, {'Name':'Author_2'}
                        ],
                        Year:Math.round( Math.random() * 30 ) + 1982,
                        Rating:Math.round( Math.random()*10 ),
                        Location:'Location_2'
                    };

                //append the result to the book list
                $('#book-list').append( compiled ( jsonData ) );

            });

        });
    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script>
	</head>
	<body>

	<input type="button" id="add-book" value="Add book" />
	<div id="book-list">
	</div>
	<div class="templates" style="display:none;">
	<!-- add all templates, under an invisible div -->
	<div class="Book">
	<p class="Id">
	</p>
	<ul class="Authors">
	<li class="Author"><span class="Name"></span></li>
	</ul>
	<p class="Year">
	</p>
	<div class='book-footer'>
	<div class="rating-div">
	Rating: <span class="Rating"></span>
	</div>
	<div>
	Location: <span class="Location"></span>
	</div>
	</div>
	</div>
	</div>

	<script type="text/javascript">

	$('document').ready(function () {

	//instructions to compile
	var directive = {
	'@class':'"Book"',
	'@id':'book-#{Id}',
	'.Year':'Year',
	'.Rating':'Rating',
	'.Location':'Location',
	'.Author':{
	'author<-Authors':{
	'.Name':'author.Name'
	}
	}
	},
	//compile the template to a JS function
	compiled = $('.templates .Book').compile( directive );

	$('#add-book').click(function () {

	var jsonData = {
	Id: 1,
	Title:'Book_2',
	Authors:[
	{'Name':'Author_1'}, {'Name':'Author_2'}
	],
	Year:Math.round( Math.random() * 30 ) + 1982,
	Rating:Math.round( Math.random()*10 ),
	Location:'Location_2'
	};

	//append the result to the book list
	$('#book-list').append( compiled ( jsonData ) );

	});

	});
	</script>

	</body>
	</html>