Geek Answers Handbook

Templates or similar for JavaScript programs in the browser

I made a lot of server-side HTML programs and used several different template languages ​​to create (X) HTML. This part is very clear to me.

But I wonder how people use this in client-side JavaScript programs? I mean, obviously, there may be template languages ​​written for JavaScript that work inside the browser, but is that the way people usually do it? Or are people just manipulating the DOM directly? Or are there any interesting helper libraries that most people use?

As an example — let's say I want a JavaScript application that retrieves a list of contact cards from a remote server to return as a JSON object. Then I want to show these contact cards on the browser side using a specific predefined HTML markup into which I fill in the required fields. How is this usually done?

+2
source share
6 answers

There are many ways people usually do this:

  • Storing html in a file extracted from the server when you make your ajax call and just paste it into the DOM
  • Getting the dynamic bits of the content you want and then building all the client side HTML and pasting it into the DOM (this is probably the most common and the one I would recommend the least)
    • Using javascript template language (I'm pretty inferior for jquery tempest plugin)

There are other solutions, such as hiding content that needs to be packaged in the text area or in html script tags, but I am not their fan, as they tend to create incorrect / invalid markup.

+1
source

The task you are describing can be accomplished using a template system or manually manipulating the DOM, just as server-side execution can be done using a template system or a sequence of string concatenations. Personally, if I have to ask this question, I usually use a template system. (In fact, if you think that printf formatting, which is available in most languages, is a template system, I almost never manipulate strings without using templates.)

Several JavaScript template languages ​​that I know of include:

Closing templates are interesting in that server-side rendering is also available for them, so you can share templates between server-side code and JavaScript. jugl is pretty similar to TAL, so you can do this with jugl too.

+1
source

I reviewed the solutions offered here and was not completely satisfied. I found out:

  • Most people simply concatenate strings and assign them elem.innerHTML . This is too ugly for me.
  • Some people create a DOM with Builder objects, so they actually write HTML with JavaScript for dynamic content. This is what I would use if the content was 100% dynamic, but in this case I would prefer to have templates that are actually html that I can customize.
  • Some people use actual template languages ​​in client-side JavaScript. That is, there are all kinds of if-constructs and while-constructs and string replacements and all that. That would be, be that as it may, what I was looking for when writing the question. That is what seems completely ineffective for parsing the client side of the text markup when you have the whole DOM engine at your feet.

But what I learned to really want myself is a programmatic way to combine HTML from DOM fragments and fill in the required data in the middle. I found two solutions for this:

Of these, I chose PURE for my needs.

Thanks for all the answers.

+1
source

You're right. There are template libraries for JavaScript. If it's simple enough, you can simply create HTML as a string and add it to the DOM, after which the browser will display it.

Here is the John Resig micro template library: http://ejohn.org/blog/javascript-micro-templating/

0
source

I suggest ExtJS XTemplates. Simple, powerful, self-sufficient, enjoyable. -j

0
source

If you use Script # , you can consider SharpTemplate , a highly typed, super-efficient HTML template engine.

0
source

More articles:


All Articles