Give up using your innerhtml to output html. jquery tmpl is not explained in detail.

ArticleDirectory

• Disadvantages
• Requirement
• Solution
• Implementation Principle
• Summary

In the case of Ajax, we have higher requirements on page interaction, and dynamic HTML generation is undoubtedly one of them. There are multiple ways to dynamically generate HTML, with the core being in the front-end (JS) or back-end (C #/PHP ...) Assemble the data into the desired template and finally output it to the user (innerhtml, documentwrite, etc.) in a certain way ).

Disadvantages

1) The process of concatenating strings is prone to errors and often forgets matching symbols such as '/">.

2) When modifying the foreground template, it is easy to forget to synchronously change the dynamically generated template.

3) the concatenated string is not intuitive and beautiful, and is not conducive to search errors. For example, if HTML content exists in the data, it may cause various troubles.

4) it cannot meet high business logic requirements and is difficult to process and judge. For example, when a generates an X template, B generates a y template.

5) Low reusability, making it difficult to share similar templates.

 

Requirement

1) simple and intuitive templates

2) easy to maintain (easy to find errors,CodeColoring, etc)

3) reusability of templates

4) process certain logic judgments

 

Solution

Based on the above disadvantages, the jquery tmpl plug-in can meet our needs. To use this new template technology, you only need to introduce the jquery tmpl plug-in. This plug-in is very small (5.97kb) and has little impact on performance. It is also said that this plug-in was developed by Microsoft and is highly friendly to ASP. net mvc. Click here to enter the Project address

Implementation Principle

Through the image, we can intuitively see the working principle of tmpl. We only need to provide data and templates. Data can be directly transmitted to the foreground through the JSON method in the background, and the template is what we will talk about next.

1) Where can I write the template code?

 
<ScriptType= "Text/X-jquery-tmpl"ID= "Testtemplate">/*Template code*/</Script>
 

We can see that the container of the template code is our <SCRIPT> tag, however, the type is 'text/X-jquery-tmpl' rather than 'text/JavaScript ', which is hard to remember? It doesn't matter. In visual studio2012, there is already a smart reminder of this type (2010 not verified ).

2) template syntax

I divide the jquery tmpl syntax into three categories:

1. display class:

{HTML}/{=}/ $ {}, all three tags can output data to the template, however, {HTML} does not encode the data and is used to output the HTML code segment in the data, while {{=}and $ {} encode the data, prevents data from cracking the template structure.

Template code:
Data and JS Code:
Page effect:

When we replace the name value in data with an HTML '<a href = "http://www.google.com"> click something fun! </A> ', you can see the difference between {HTML}/{=}/ $.

Page effect:

From this we can see that using {HTML} to output the content in the template carries a certain risk (XSS attack ), therefore, it is best to use $ {} to output content in the security of uncertain data, which is simple and concise. Of course, the direct output content is far from meeting our requirements. It would be even better if we could call a function to process the output result!

Template code:
Function Code:
Page effect:

2. Condition judgment and loop:

{If}/{else}/{/if}/{each} Please note that there is no for/while/switch, compared with jquery tmpl, it only supports Simple logic judgment. If you feel that these cannot meet your needs, you can write your own functions and then call them. For a simple example:

Template code:
Data and JS Code:
Page output:

In the code, we can note that {each} can be written in either of the following ways) $ value is used in the {each} code block to specify the value of the current item. You can use {each (I, V )}} I indicates the order of the current item, and V indicates the value of the current item. If your condition judgment is complex, you can use functions to determine (exactly the same as JS)

For example, the effect is exactly the same as the above.

3. Reuse class

{Temp} when the branch template is too long (it is confusing to write it in one template) or you use a general template that has already been written, {temp} is used to call the specified ID template to display data.

Template code:

The final effect of this template is exactly the same as that of the previous one, but they are separated separately. This improves code readability and reusability. Other templates are called at one time. What if you want to call them cyclically? For example, output interests in the example. Let's take a look at how to write the code.

Template code:

$ Data is used in the eachtemplate to specify the value of the passed traversal item. It is quite convenient.

{Wrap} is used to specify a template to include the current template. It is similar to specifying a master page. The current template belongs to a subpage.

Template code:
Page effect:

We can see that the 'wraptemplate' function is as a public part. In the template, {HTML item.html} is used to output the HTML content of the subpage.
Specifically, item.html also provides certain filtering functions.

Template code:
Page effect:

We can see that only the second p is output here. Item.html#there is also a missing item.html (filter, textonly), textonly is bool value. If it is true, only the text of the element is output and its original element label is ignored.

Template code:
Page effect:

It can be seen that the strong element does not have a bold effect, only text.

Summary

In fact, some advanced functions of the template are not often used in the process of use. This article only introduces some basic things about jquery tmpl. Using this plug-in can bring us a lot of benefits. Before I dynamically output HTML code segments (concatenate strings in JS files) I often modify the front-end page and forget to modify the concatenation string in JS, which leads to some inexplicable errors. In addition, the inferior position of the concatenation string under multiple branch judgments is more obvious, now, I will place the code of the tmpl template on the front-end page to generate code, which greatly reduces errors!

The above content does not involve ASP. net interaction and more advanced application skills. net MVC application Article ~ Pai_^