pure/gist:7568400

## 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://pure.github.io/pure/libs/pure.js"></script>
</head>
<body>
	<div class="test">
		<ul><li></li></ul>
	</div>
	<script>
		var data = { rows:[1, 2, 3] },
			directive = {
				'li':{
					'row<-rows':{
						'.': 'row'
					}
				}
			},

			//take a copy of the template
			template = $('UL').clone(true),

			//compile the template to a JS function
			compiled = template.compile( directive ),

			addLines = function(newData){
				//render in memory a new node
				newNode = template.clone(true).render(newData, compiled);

				//add each row
				newNode.find('LI').each(function(){
					$('UL').append(this);
				});

			};

		//initial rendering
		$( 'UL' ).render( data, compiled );

		//each time new data needs to be added
		addLines( {rows:[4, 5, 6]} );
		addLines( {rows:[7, 8, 9]} );


	</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://pure.github.io/pure/libs/pure.js"></script>
	</head>
	<body>
	<div class="test">
	<ul><li></li></ul>
	</div>
	<script>
	var data = { rows:[1, 2, 3] },
	directive = {
	'li':{
	'row<-rows':{
	'.': 'row'
	}
	}
	},

	//take a copy of the template
	template = $('UL').clone(true),

	//compile the template to a JS function
	compiled = template.compile( directive ),

	addLines = function(newData){
	//render in memory a new node
	newNode = template.clone(true).render(newData, compiled);

	//add each row
	newNode.find('LI').each(function(){
	$('UL').append(this);
	});

	};

	//initial rendering
	$( 'UL' ).render( data, compiled );

	//each time new data needs to be added
	addLines( {rows:[4, 5, 6]} );
	addLines( {rows:[7, 8, 9]} );




	</script>
	</body>
	</html>