Give up using your innerHTML to output HTML, JQuery Tmpl not explained in detail

In the Ajax bar today, we have a higher demand for page interaction, and dynamically generated HTML is undoubtedly one of them. The dynamic generation of HTML in a variety of ways, its core is in front (JS) or back end (c#/php ... ) Assemble the data into the template we want, and finally output it to the user (InnerHTML, documentwrite, etc.) in a certain way.

Disadvantages

1) The process of stitching strings is error prone, often forgetting the '/' > and other matching symbols.

2) Modify the foreground template while it is easy to forget synchronization changes dynamically generated templates.

3) Stitching the string is not intuitive and beautiful, not conducive to finding errors, such as: If there is HTML content in the data, can cause a lot of trouble.

4) can not meet the high business logic requirements, processing judgment is more troublesome, for example: When a case of the generation of the X-template, b case to generate Y-template.

5) reusability is low, the more similar templates are difficult to be common.

Demand

1) Simple, intuitive template

2) easy to maintain (easy to find errors, code coloring, etc.)

3) reusability of the template

4) handle Certain logical judgments

Solution Solutions

Based on the above shortcomings, JQuery Tmpl This plugin can be a good fit for our needs. The use of this new template technology simply requires the introduction of the jquery Tmpl plugin. The plug-in is very small (5.97KB) and has little impact on performance. And reportedly this plugin is developed by Microsoft, the friendliness of the ASP is significant. Click here to go to the project address

Implementation principle

Through the picture we can very intuitively see how Tmpl works, we just need to provide data and templates. Data we can pass the background of the JSON method directly to the foreground, and the template is the next thing to talk about.

1) Where is the template code written?

<script type= "Text/x-jquery-tmpl" id= "testtemplate" >/    * template Code */</script>

We can see in fact the template code container is our <script> tag, but the type is ' Text/x-jquery-tmpl ' instead of our usual ' text/javascript ', type is difficult to remember? It doesn't matter, there's a smart hint of this type in visual Studio2012 (not verified by 2010).

2) syntax of the template

I have divided the syntax of jquery Tmpl into three main categories:

1. Display class:

{{html}}/{{=}}/${}, these three tags will be able to output data to the template, but {{html}} will not encode the data for the output of the HTML snippet in the data, and {{=}} and ${} will 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 on something Fun! </a> ' can see the difference between {{html}}/{{=}}/${}.

Page effect:

As a result, it is possible to use {{html}} to output the contents of the template with a certain risk (XSS attack), so it is best to use ${} to output the content in the context of the security of the non-deterministic data 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 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, compared to the jquery Tmpl only support simpler logic 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, and if you do not add (i, v) to each followed by the {{each}} code block, use $value to refer to the value of the current item, and you need the ordinal of the item to use {{each (I, v)}} where I represents the order , v represents the value of the current item. If your condition is more complex, you can use the function to judge (exactly the same as JS)

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

3. Reuse Class

{{Temp}} The role of {{temp}} is to invoke the specified ID template to display the data when the branch template is too long (it is confusing to write in a template) or uses a generic template that has already been written.

Template code:

The final effect of this template is exactly the same as before, but separate from each other. Improved readability and reusability of code. Here is just a one-time call to other templates, if you want to loop call it? For example, in the example of exporting hobbies 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 traversal item passed in. How to feel is still quite convenient, right ^_^.

{{Wrap}} enables the specified template to contain the current template, similar to the specified master page The current template is a sub-page.

Template code:
Page effect:

We can see that the effect of ' wraptemplate ' is to use {{HTML $item. html}} in the template to output the HTML content of a child page as a public part.
Among them, $item.html also has certain filtering 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), and a bool value of textOnly to True will only output the text of the element and ignore its original element label.

Template code:
Page effect:

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

Summarize

In fact, in the use of the process is not often used in the template of some of the advanced features, this article is only a few about the jquery Tmpl basic things. The use of this plug-in can give us a lot of benefits, before I in the dynamic output HTML code snippet (in the JS file splicing string) often modified the foreground page and forgot to modify the concatenation string in JS, resulting in a lot of inexplicable errors, And in many branches to judge the inferior of the stitching string is more obvious, now I will put the Tmpl template code in the foreground page to generate code, which greatly reduces the error occurred!

The above content does not involve interaction with ASP. And more advanced application techniques, and if you reflect well, you will write an application that combines ASP. NET MVC-^_^

Source: http://www.cnblogs.com/coffeedeveloper/archive/2012/07/25/2609204.html

Give up using your innerHTML to output HTML, JQuery Tmpl not explained in detail