Twirl Your Mustache

Reuse Templates On The Client And Server With CouchDB, CouchApp, and Mustache

In my last post I talked about my introduction to building applications with Apache CouchDB and CouchApp. I’ve been refactoring the app to use Backbone.js and RequireJS on the client, and to take advantage of templating to make presentation logic more DRY. This post shows how to reuse Mustache templates on the client and server using CouchDB and CouchApp. I’ve left out the Backbone/RequireJS code for simplicity, and illustrate the client code using jQuery’s shorthand ‘$.get’ AJAX method.

Mustache is a logic-less templating language available for a variety of languages. It ships with CouchApp, and Backbone is agnostic, so it seemed a no-brainer. Mustache supports partial templates, for portions of a page’s markup, and I’ll show how to reuse a partial template to do a partial page refresh on the client.

Say we have the following extremely simplistic template:

/templates/page.html:

Partial templates are indicated with the greater than (‘>’) symbol, so here we’re indicating that a partial template named ‘content’ should be rendered in the <div id=”content”> element. Now let’s say we have the following partial template:

/templates/partials/content.html:

For the server side, we can render HTML pages via CouchDB ‘shows’ and use Mustache in the show code, i.e.:

/_shows/page.js:

Here, this.templates refers to the current design document’s ‘templates’ property, and this.templates.partials to its ‘templates.partials’ property. These correspond to your CouchApp’s directory structure prior to push.

We can then hit the page at: /dbname/_design/docname/_show/page, and use a combination of rewrites.json and a proxy or virtual host to pretty up the URL.

For our purposes, we’re considering reusing a template from the ‘partials’ directory for a client-side partial page refresh. We can serve the template markup from a show also, passing the template name in the URL, i.e., /dbname/_design/docname/_show/templates/page.html:

/_shows/templates.js:

Here, we first look for the template name in the design doc’s templates, then in templates.partials.

On the client, we’ll use the jQuery plugin for mustache, which ships with CouchApp:

<script src=”vendor/couchapp/jquery.mustache.js”></script>

First we’ll make a GET request for the template:


Then for a partial refresh, we’ll GET our updated data and apply the same partial template on the client:


This is an extremely simplistic example, the point being to illustrate the considerable DRY we can achieve through template reuse. Write the template once, and use it on both the client and server.

Nice!