Question

I am creating a web app that requires me to render new elements on the page many, many times. It is getting out of hand for me to add HTML by putting it into a Javascript string. Mostly because it’s hard to edit it especially when it spans multiple ways. What’s the best solution for this? And what’s the best way to organize this stuff because I feel like I am going to have a huge page full of JS “subelements”.

Answer 1

There are a huge number of JavaScript templating engines available. Some of the more popular ones include:

• Mustache
• Handlebars
• Underscore
• jQuery.template

Most work by compiling your template text into a function that can be called with an object containing the data to be interpolated.

For example (using underscore.js):

var myTemplate = _.template("Hello <%= person %>");
alert(myTemplate({person : "egidra"}));