Give up using your innerHTML to output HTML. JQuery Tmpl don't explain in detail _jquery

In the Ajax bar today, we have a higher demand for page interaction, dynamic generation of HTML is undoubtedly one of them. There are a variety of ways to generate HTML dynamically, the core of which is in the front (JS) or back-end (c#/php ...). The data will be assembled into the template we want, and eventually output to the user in a certain way (InnerHTML, documentwrite, etc.).

Disadvantage

1 The process of stitching strings error prone, often forget the '/' > and other matching symbols.
2 Modify the foreground template at the same time easy to forget synchronization changes dynamically generated templates.
3 stitching string is not intuitive and beautiful, it is not conducive to finding errors, such as: If there is HTML content in the data, can cause all sorts of trouble.
4) can not meet the higher business logic requirements, processing judgments more cumbersome, such as: when a situation to generate X-template, b case generated Y-template.
5) Low reusability, more similar template is difficult to public.

Demand

1 Simple, intuitive template
2 Easy to maintain (easy to find errors, code coloring, etc.)
3) The reusability of templates
4) to deal with certain logical judgments

Solution

Based on the above shortcomings, JQuery Tmpl This plug-in can be very good to meet our needs. Using this new template technology requires only the introduction of the jquery Tmpl plug-in. The plug-in is very compact (5.97KB) and has little impact on performance. And it was also rumoured that the plugin was developed by Microsoft and that the friendliness of asp.net mvc was significant. Click here to enter the project address

Through the picture we can very intuitive see tmpl work principle, we only need to provide the data and the template version. The data can be uploaded directly to the foreground via the backend JSON method, and the template is the next thing to talk about.

1 where is the template code written?

Copy Code code as follows:

<script type= "Text/x-jquery-tmpl" id= "Testtemplate" >
/* Template Code * *
</script>

We can see that the template code container is our <script> tags, but the type is ' Text/x-jquery-tmpl ' instead of our usual ' text/javascript ', type is difficult to remember? Never mind, there is already a smart hint for this type in Visual Studio2012 (no 2010 has been validated).

2 The syntax of the template

I divide the syntax of jquery Tmpl into three broad categories:

1. Display class:

{{html}}/{{=}}/${}, these three labels can output data to the stencil, however, {{html}} does not encode data to output HTML snippets in the data, while {{=}} and ${} encode the data to prevent data damage to the template structure.

Template code:
Data and JS code:
Page effect:

When we change the value of the name in the data to a section of HTML ' <a href= ' http://www.google.com ' > Click there's something fun yo! </a> ' You can see the difference between {{html}}}/{{=}}/${}.

Page effect:

From this we can be seen using {{html}} to output the contents of the template is a certain risk (XSS attack), so it is best to use ${} to output the content in the uncertain data security is simple and concise. Of course, the direct output content is far from satisfying our requirements, if we can call the function to deal with the output result is even better!

Template code:
Function code:
Page effect:

2. Condition judgment and Circulation:

{{if}}/{{else}}/{{/if}}}/{{}}}/{{Each}} Please note that there is no for/while/switch, and that jquery Tmpl only supports simpler logical judgments, of course, if you feel that these do not meet your needs, you can write your own letter Number and then call again. Give a simple example to illustrate:

Template code:
Data and JS code:
Page output:

In the code we can notice that {{each}} is written in two ways, if you do not use $value in the {each}} code block after each (I, V) to refer to the value of the current item, and you need an ordinal number of the item, you can use {{each (I, v)}} where I represents the current item order , v represents the value of the current item. If your condition is more complex, you can use a function to determine (exactly like JS)

For example: The effect is exactly the same as above.

3. Reusable class

{{Temp}} When the branch template is too long (which is confusing in one template) or uses a generic template that has already been written, the {{temp}} function is to call the specified ID template to display the data.

Template code:

The final effect of this template is exactly the same as before, but separate from each other. Improve the readability and reusability of the code. Here is only a one-time call to other templates, if you want to loop it? For example, in the example of exporting interests like that. Let's take a look at how the code should be written.

Template code:

In the Eachtemplate template, the $data is used to refer to the value of the traversed entry. How to feel is very convenient bar ^_^.

The {{Wrap}} enables you to specify a template to contain the current template, similar to specifying that the current template for the master page belongs to a child page.

Template code:
Page effect:

We can see the effect of ' wraptemplate ' as the public part, in the template with {{HTML $item. html}} to output the HTML content of the child pages.
$item.html also has a certain screening function.

Template code:
Page effect:

You can see that only the second p is output here. $item. The HTML method also has an option $item.html (filter, textOnly), textOnly is a bool value if true, only the text of the element is output and its original element label is ignored.

Template code:
Page effect:

You can see that the strong element has no bold effect but only text.

Summarize

In fact, the use of the process does not often apply to the template of some of the advanced features, this article is simply introduced some of the basic jquery tmpl things. The use of this plug-in can bring us a lot of benefits, before I dynamically output HTML code segment (in the JS file stitching string) often modified the front page and forgot to modify JS in the stitching string, resulting in a lot of inexplicable mistakes, And in a number of branches to determine the inferior stitching string is more obvious, now I will put the Tmpl template code on the front page to generate code place, so that greatly reduce the error occurred!

The above content does not involve the interaction with the ASP.net, as well as some more advanced application techniques, if everyone reflects well will write a combination of asp.net MVC application article ~ ^_^