I just published my first Play! module to the official repository, it's called play-mustache. The aptly named module provides some integration between Mustache and the Play! framework. The goal is to make it easier to re-use markup across all layers of a dynamic web application.

You can take a look at the code and read the manual on github. For a complete reference of the mustache template language checkout their manual.

The markup snippets can be defined in an external file, but the module also provides a tag to define the snippets in a view. To define snippets inline you use the mustache.template tag.

#{mustache.template 'task_item'}
	<li class="task" id="task_{{id}}">
		<span class="name">Task {{id}}</span>
		<span class="details">{{details}}</span>
		<span class="priority">{{priority}}</span>
	</li>
#{/mustache.template}

The template can then be used in your view using the mustache.print tag.

<ul id="tasks">
#{list tasks, as: 'task'}
	#{mustache.print 'task_item', context:task /}
#{/list}
</ul>

And it can be used within your JavaScript using the PlayMustache.to_html method.

var data = {
	id: 34,
	details: 'Finish the project',
	priority: 'High'
}
var html = PlayMustache.to_html("task_item", data);
$('#tasks').append($(html));

If you don't want to specify your snippet inline, you can move it into an external file. By default the module will look in app/views/mustaches for template files, but you can configure this path by specifying mustache.dir in your application.conf.

To reference an external snippet, just use the relative filename as the template name. For example, if your file is called app/views/mustaches/my_template.html then you would use it server-side like this:

#{mustache.print 'my_template.html', context:data /}

And client-side like this:

PlayMustache.to_html('my_template.html', data);