Completely master the jquery tmpl template

Before using Angular for template rendering, I accidentally discovered the lightweight jquery tmpl. Its documentation is here. This article mainly brings you a jquery tmpl template (explanation with examples). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Official explanation of the plug-in: use the first matched element as a template, render the specified data, and the signature is as follows:

.tmpl([data,][options])

The parameters The purpose of data is obvious: the data used for rendering can be any js type, including arrays and objects. Options are generally options. The official pointed out that the options here are a map of user-defined key-value pairs, inherited from the tmplItem data structure, and are suitable for use during the template render action.

You can download the latest tmpl plug-in here. It is worth mentioning that the official also stated that tmpl is currently a beta version and should be used with caution..

The following is a simple example

##

The effect is as follows

When defining a template, the recommended way is to define and use

as a wrapper for the template, but this is not the only way to define it. One way, you can use

to compile the cached template. In jQuery .tmpl(), you can also compile and cache the template in advance, and then use it at the appropriate time. Again, this is useful for some data nesting, such as:

HTML:

##

JavaScript:

The effect is as follows

##$.template() method,

Compile a piece of Html into a template, example:

JavaScript

var markup = '${ID}${Name}'; $.template('template', markup); $.tmpl('template', users).appendTo('#templateRows');

This way you can apply the template defined in markup to the templateRows object.

jQuery .tmpl() tags, expressions, attributes:

${}: Judging from the previous example, the role of this tag is obvious, it is equivalent to a placeholder. But there is another way to write {{= field}} such as:

It must be noted that the "=" sign must be followed by a space, otherwise Ineffective.

jQuery .tmpl() has two useful attributes: $item and $data:

$item represents the current template; $data represents the current data.

Html

Javascript

{{each}}

You can tell at a glance that this tag is used for looping. The usage is as follows: (keywords

{{each Array}}, $value, $index)HTML

Javascript

##

The effect is as follows

{{each}} There is another way of writing:

Javascript

The function is the same as the previous one.

{{if}} and {{else}}, these two tags should be clear at a glance. Let’s go straight to the example:

Javascript

If there are more than 1 Langs array elements, use ';' to connect them, otherwise Langs will be displayed directly. The effect is as follows:

{{html}}, directly replace the placeholder with the object attribute value as HTML code

$.tmplItem()method, using this method, you can get the value from render Re-obtain $item on the element, example:

$('tbody').delegate('tr', 'click', function () { var item = $.tmplItem(this); alert(item.data.Name); });

The effect is as follows:

Related recommendations:

Detailed explanation of the use of jquery.tmpl, a framework for generating HTML using templates

After jQuery obtains json, use zy_tmpl to generate a drop-down menu, jsonzy_tmpl_PHP tutorial

Use zy_tmpl to generate drop-down menu after jQuery obtains json_PHP tutorial

The above is the detailed content of Completely master the jquery tmpl template. For more information, please follow other related articles on the PHP Chinese website!