Template engine proposal

index.html

<!--
Goal: use your mockups as templates

Do not repeat yourself. Don’t make mockups AND templates. Do both at the same time. Your template is your mockup, so it can be seen in your browser and you can use the same text editor you are using for your mockups.


But how?

With a template engine that uses especial HTML attributes that are removed during template execution.
These non-standard HTML attributes are ignored by web browsers.
-->


<!--
	Iterate over collections with the "foreach" and "as" attributes.
	The first child element will be used as template. The rest of children
	will be removed so you can use them as dummy content.

	In this case "drama_films" is an object passed to the template.
-->
<div foreach="drama_films" as="film">
	<div>
		<!--
			Use the "put" attribute to show data
		-->
		<h2 put="film.title">Example film 1</h2>
		
		<!--
			You can use conditionals
		-->
		<p if="film.comments > 0">
			<span put="film.comments">3</span> comments
		</p>
		
		<!--
			Use the especial "hidden-in-mockup" class to hide
			things in the mockup. Useful for conditionals.
			The template engine will remove all
			"hidden-in-mockup" appearances.
		-->
		<p class="hidden-in-mockup" if="film.comments == 0">
			<span>No comments</span>
		</p>
		
		<p>
			<!--
				You can define or override attributes by using
				put-<attr-name>. For example you can define dummy
				links in your mock-up, and then override them
				with real data while in production.
			-->
			<a href="news-detail.html" put-href="/news/${film.id}">
				continue reading
			</a>
		</p>
	</div>

	<div>
		<h2>Example film 2</h2>
		
		<p>
			<span>No comments</span>
		</p>
		
		<p>
			<a href="news-detail.html">
				continue reading
			</a>
		</p>
	</div>

	<div>
		<h2>Example film N</h2>
		
		<p>
			<span>5 comments</span>
		</p>

		<p>
			<a href="news-detail.html">
				continue reading
			</a>
		</p>
	</div>
</div>

<!--
	Use the "remove" attribute to remove things when the template is executed.
	The best use case is to tell the browser not to display elements
	with "hidden-in-mockup" class.
-->
<style remove> .hidden-in-mockup { display:none } </style>
<!--
	You can also use it for features you are working on and are not finished yet.
-->
<p remove><a href="#">follow me on twitter!</a></p>

First version now available! :)
https://github.com/gimenete/emmental

I have changed some things but most of the things are as planned. I have implemented it using NodeJS and attributes can contain any javascript expression.