How to integrate CouchApp, Node.JS, Sammy and Mustache

Question

I set up a node.couchapp.js CouchApp and pushed it to my CouchDB. There is Sammy and jQuery included by default. Now, I'd like to add Mustache for templates, but don't exactly know where? I could use it as Node.js module or jQuery plugin.

I started with some sample code, just to see if it works, but it doesn't:

ddoc.lists = {
"basic": "function (head, req) { var that = this; provides('html', function () { var to_html = require('modules/mustache').to_html; var members = []; var row; while (row = getRow()) { members.push({club: row.key[0], name: row.key[1]}); } return to_html(that.templates['roster.mustache'], { members: members }); }) }"
};

Results in:

{"error":"invalid_require_path","reason":"Object has no property \"modules\". ...

Project structure is:

. Project
| - app.js
| - attachments
| - - scripts
| ` - index.html
| - modules
|   | mustache
| - ` - mustache.js
` - templates

Update I modified the code a bit and excluded the template folder as possible cause. This snippet is from a solved question here on SO, so it should actually work. But it's still the same error. I installed mustache.js with npm install mustache and renamed the folder from node_modules to modules (didn't work with node_modules either).

"basic": "function (head, req) { provides('html', function () { var template = '{{%IMPLICIT-ITERATOR}}{{name}}: <ul> {{#items}}<li>{{.}}</li>{{/items}} </ul>'; var mustache = require('./modules/mustache/mustache.js'); return mustache.to_html(template,view);});}"

But it's still the same error.

Answer 1

I'm not sure about the specific error you're getting, but to your question: "Now, I'd like to add Mustache for templates, but don't exactly know where? I could use it as Node.js module or jQuery plugin."

You can use it in both.

As Node.js runs on the server-side this effectively gives you a way to define your template once (using Mustache in this case) and run it both server-side (using Node.js) and client-side (using the jquery-plugin).

Just for the overview (you may well already know this): Imagine rendering a search-result of products:

• The traditional way is to render the products with some server-side templating engine.

• Now, let's say you want to enable filtering / sorting of the search-results. Generally speaking you have 3 options:

  1. do a normal (non-ajax call) to the server, do server-side templating and spit out the new page
  2. do an ajax-call to the server, do server-side templating and spit out html, pick it up client-side and insert it into a dom-element.
  3. do an ajax-call to the server, generate a json-object, which you render client-side using a client-side templating engine (such as Mustache) into a dom-element.

Option 3 is arguably the best solution from a usability standpoint. (quick, low-bandwidth, no page flickering or page jumping, etc. ) . However think about a fallback/non-js way for SEO if you need it.

When implementing option 3 however you now have the situation of needing a server-side templating language to render products on the initial page load, and a client-side templating language to render products returned from subsequent ajax-calls. Both result in the exact same html. Not very DRY.

Here node.js comes into play, which eliminates the need for writing a seperate server-side template. Instead, just let node.js spit out the initial page using the exact same mustache template you use on the client-side.

Of course you could go the only client-side route: spitting out json on the intial page load as well, and render that on the client. This of course if terrible from a seo-standpoint. Some apps don't the search engine indexing however, in which case the 'everything on the client' approach is a good alternative.

Some related questions:

• Client-side templating language with java compiler as well (DRY templating)
• Good DRY approach to rendering and AJAX updating of page