template-driven project is as follows: a template is written according to a template engine, which is used by the back end to render a html fragment, which is returned to the client, that is, the browser. Here you skip the compilation process of the template engine and insert the uncompiled template directly into the dom node.

the syntax of backfilling server templates on the client side is meaningless, because browsers do not recognize the jinja2 syntax, which is compiled by the backend template engine to get specific rendering results. Therefore, the correct solution should be to migrate the logic of if-else to the server, and the client is only responsible for stitching and rendering the server templates compiled by the backend, in other words, Migrate the logic to the server, leaving rendering and stitching on the client.

this kind of template-driven project is really troublesome to concatenate html strings. Generally, even if you use jquery , try not to manually stitch the html template and append directly under a dom node, but should use a more declarative way.

now that it is 2018 years old, it is also a good choice to use some lightweight mvvm frameworks, such as vue , which do not require any front-end engineering configuration, introduce and use them, and enjoy the convenience brought by responsiveness.