How is it fashionable to store HTML in Javascript today? MVC already invented?

Question

JavaScript

Hello!

I haven't written anything serious in Javascript for a long time.
I see that frameworks are developing very well.

Can you tell me how the HTML code problem is solved? When, for example, do you have a complex HTML code dynamically generated based on JSON that came from the server? It is clear that you can return the HTML code from the server side, or you can assemble the DOM manually. But in the first case, you are tied to the data format, in the second, constructions are sometimes very complicated, and it is difficult to change numerous addChild in case of serious changes in the code. There are templates for this on the server side. But on the client side, what's the hardest thing right now?

Answer 1

JavaScript Micro-Templating by John Resig.

Answer 2

closure templates is highly recommended. Work in several combat projects. Hosted on code.google.com I can give the exact link when I'm at the computer :-)

Answer 3

there is also XML+XSLT

Answer 4

I also often face this issue.
I chose three approaches for myself:
1. if you need to generate a little code, something like a single text field with a label, I use jquery for this: $(''...).after(...). It is convenient because you can cache links to elements, which are then attached to event handlers, etc.
2. the structure can be a little more complicated, but not much, then I use $.nano - a convenient plugin and very small. I also like the way it is written. True, there are limitations - it is bad with arrays of values, but
3. If large data for rendering goes between the client and the server, then here I already generate all the HTML on the server, and then insert it. The fact is that I believe that the site should still be able to work without JS (this is a separate question - why). Therefore, if JS for some reason does not work out, a normal page comes. The server itself decides, depending on whether the ajax or non-ajax request came and gives either the full page or a piece. By the way, the jquery ajaxify plugin helps with this.

Answer 5

I do not recommend using xml + xslt, all browsers perceive it differently.
Tested on my own skin. It is very difficult to debug errors.

Answer 6

Just finished a big project in which I used EJS (an open source javascript template library) for such purposes . You can make templates with pretty fancy logic.

Answer 7

My advice to you is not to be smart with template engines for JS. If you need to reproduce a piece of code according to a template, for example, for a table with data, make it hidden with the template class. Also provide the tags in which you need to substitute values ​​with the appropriate classes, for example: cell-name, cell-price, etc. and substitute values ​​in them. By doing this, you kill several birds with one stone (value substitution, defining handlers, convenient debugging, etc.) using simple tools.

Answer 8

In one project I use api.jquery.com/tmpl/ (the official plugin for jQuery), a convenient and functional plugin.
In another project, I use a self-written precompile (using xsl) of server-side templates in javascript - very conveniently, the same templates can be easily used both on the server side and on the client side