Jtemplate usage notes

Jtemplate is used in recent projects.

 

<Script type = "text/javascript" src = "Scripts/jquery-jtemplates.js"> </script>

 

<! -- Result container -->
<Div id = "result_container"> </div>

 

<! -- Template content -->
<Textarea id = "template-items" is the jtemplate format. The template content is placed in textarea, and keywords and data are wrapped in braces, $ T indicates the data, and the keyword # indicates the start.

<Script type = "text/javascript">
Var data = [{name: 'Anne ', birthday: '2017-01-01', mail: 'Anne @ domain.com '},
{Name: 'amelie', birthday: '2017-02-02 ', mail: 'amelie @ domain.com '},
{Name: 'polil', birthday: '2017-03-03 ', mail: 'Polly @ domain.com '},
{Name: 'Alice ', birthday: '2017-04-04', mail: 'Alice @ domain.com '},
{Name: 'martha ', birthday: '2017-05-05', mail: 'martha @ domain.com '}]
// Set the Template
$ ("# Result_container"). setTemplateElement ("template-items ");

// Fill in and display data
$ ("# Result_container"). processTemplate (data );

// You can also write $ ("# result_container"). setTemplateElement ("template-items"). processTemplate (data) here );
</Script>

After this is done, a data list is displayed:

 

5. Call javascript in the template

In {}, you can write javascript scripts at will. For example, if you want to display your birthday in another format

Of course, you can also package it into a method for calling, such as defining the js method first:

Function formatDate (date ){
Return date. replace (/-/g ,'/');
}

Change the template to {formatDate ($ T. item. birthday)} to achieve the same effect.

 

6. How to include the textarea input box in the template

The jtemplate content is stored in textarea, but sometimes we need to include textarea in the template. There are two ways to achieve this:

1) comment out the content in the template. For example, change the template:

<! -- Template content -->
<Textarea id = "template-items" <input id = "d11" type = "text"

Its parameter is a json object with braces. If you put it directly in the template like this, you will not get the desired effect, but there are also flexible methods, such as writing The onclick event outside the template.

 

7. The preceding example shows how to bind a simple data list using jtemplate. However, jtemplate can bind any json object and has many usage methods. You can refer to http://jtemplates.tpython.com/to learn more.