jquery Template: jquery templates Proposal

Introduction (Introduction)

This proposal describes how to add template support in the core library of jquery. More specifically, this proposal describes a new jquery method called Render (), which allows you to render a JavaScript object and JavaScript array as a template with a piece of HTML code.

The purpose of the proposal is to enable plug-in developers to use standard methods for declaring and rendering templates. There is a standard method for declaring and rendering templates that are beneficial to everyone:

• Plug-in developers can build rich, data-driven plug-ins, such as the DataGrid plug-in. Plug-in developers can build plug-ins on the basis of template support in the core library of jquery, so that each time a new plug-in is developed, the rendering template code can be avoided.
• Plug-in users can use a standard syntax to declare a template. Plug-in users do not need to learn a new method each time they create a template, starting with a new plugin each time.

The proposal is divided into two main parts. The first part contains a brief survey of existing template solutions, and the second part is our recommendation on how to declare and render a template to the core library of jquery.

Existing Template Solutions

Now that there are many JavaScript solution templates, a standardized template solution is inevitably the trend. In this section, we give you a brief description of the four most popular and interesting templates. What can the existing template solution solve? Those features make sense in the jquery core.

Micro Template

John Resig's miniature template engine is very small (uncompressed only 2KB). However, this little code has caught the core function of rendering a template.

The following is an example of a single JavaScript product object that is displayed with a micro-template engine.

<script src= ". /jquery-1.4.1.js "type=" Text/javascript ">>;/script>;
<script src= "Microtemplating.js" type= "Text/javascript" >;</script>;
<script type= "Text/javascript" >;
var product = {name: "Laptop", price:788.67};
$ (showproduct);
function Showproduct () {
$ ("#results"). HTML (Tmpl ("Producttemplate", product);
}
function Formatprice (price) {
Return ' $ ' + price;
}
</script>;

The Tmpl () method is used to generate a string from a product template and a Product object. The result is assigned to a innerhtml of the DIV element named results.

The product template is defined in the script of the page body.

<script type= "text/html" id= "Producttemplate" >
Product Name: <%= name%>
<br/>
Product Price: <%= formatprice (Price)%>
</script>
<div id= "Results" ></div>

Note that the Type property of the script is "text/html." Declaring a Web browser in this way ignores the contents of the script and treats its contents as a string.

Note that the template contains an expression that represents the product name and price attribute. Call the JavaScript Formatprice () method to format the price of the product. You can call any JavaScript function in the template.

Here is an example of how to render an array of product objects:

function Showproducts () {
Parse the template
var template = Tmpl ("Producttemplate");
Loop through the products
var results = ';
for (var i = 0; i < products.length; i++) {
Results + + template (Products[i]);
}
Show the results
$ ("#results"). HTML (results);
}

The Tmpl () function supports currying (about what currying can be accessed online). If no data is supplied to the Tmpl () function, he returns a JavaScript function that represents the parsed template.

In the above code, the template is parsed and then a string is generated for each product call template method. Finally, the string is assigned to the innerHTML of the DIV element named results.