Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Templates

Templates Or Similar For JavaScript Programs In The Browser

Post a Comment
I've done a lot of server-side HTML programming and used a number of different template languages for producing (X)HTML. This part is very clear to me. But what I'm wondering a bit

Solution 1:

There are a variety of ways people normally do this:

  • Storing the html in a file fetched from the server when you do your ajax call and just inserting it into the DOM
  • Getting the dynamic bits of content you want and then assembling all the HTML back on the client side and inserting it into the DOM (this is probably the most common and the one I'd recommend the least)
    • Using a javascript templating language (I'm fairly partial to jquery's tempest plugin)

There are other solutions too, such as hiding the content to be teplated in a textarea or in html script tags, but I'm not a fan of them as they tend to produce incorrect/invalid markup.


Solution 2:

The task you describe could be accomplished by a templating system or by manual DOM manipulation, just as doing it on the server side could be accomplished with a templating system or by a series of string concatenations. Personally, if I have to ask this question, I generally go with a templating system. (In fact, if you consider the printf-style formatting available in most languages to be a template system, I hardly ever manipulate strings without using templates.)

A couple of JavaScript template languages I am aware of include:

Closure templates are interesting in that there is a server-side renderer for them available as well, so you can share templates between the server-side code and the JavaScript. jugl is pretty similar to TAL so you may be able to do this with jugl as well.


Solution 3:

I went over the solutions proposed here, and was not entirely satisfied. What I learned was:

  • Most people just piece together strings and assign them to elem.innerHTML. This is too ugly for me.
  • Some people build DOM with Builder objects, so in fact they are writing HTML with JavaScript for the dynamic content. This is what I'd use if the content was 100% dynamic, but in this case I'd rather have templates that are actually html that I can customize.
  • Some people use actual templating languages on the client-side JavaScript. That is, there is all sorts of if-constructs and while-constructs and string replacements and all that. This would be, kind-of, what I was looking for when writing the question. Just that, it seems wholly inefficient to parse a text markup client-side when you've got the whole DOM engine at your feet.

But, what I found out to really want myself is for a programmatic way to piece together HTML from DOM snippets, and filling in the required data in the middle. I found two solutions for this:

Of these, I picked PURE for my needs.

Thank you for all the answers.


Solution 4:

You're right. There are template libraries for JavaScript. If it's simple enough, the HTML can just be created as a string and added to the DOM, at which point the browser will display it.

Here's John Resig's micro templating library: http://ejohn.org/blog/javascript-micro-templating/


Solution 5:

I suggest ExtJS XTemplates. Simple, powerful, self-contained, nice. -j


Post a Comment for "Templates Or Similar For JavaScript Programs In The Browser"