Record-baidutemplate's JavaScript Template

I would like to give a thumbs up. It is a great pioneering work to add Baidu to open source. It will spread the Open Source spirit and influence more developers in various companies, so that our open source will become more prosperous.

Record some templates applicable to baidutemplate. js today.

See http://tangram.baidu.com/BaiduTemplate/ for details

First, I will show two examples, then I will talk about my understanding of baidutemplate. js, and add this tool to my personal baidutemplate. js.

Instance 1:

1. How to define a template?

The following is the template block code.

<Script id = "bd_t1" type = "text/template"> <div> 
The above code shows the shadows of JSP, but the code is written into the Script block. Naturally, templates are marked by numbers. Here, IDs are unique identifiers.
2. How to add Data Rendering for the template )?


<! -- Use the template --> <script type = "text/javascript"> var data2 = {"title": "compile the template first, then fill in the Data", "list ": ["data1", "data2", "data3"]}; var bt = baidu. template; var fun = bt ("bd_t1"); var html2 = fun (data2); document. getElementById ("bd_div_2 "). innerHTML = html2; </script>
From the code above, we can see that baidu. template (template ID) is the compilation template. After the data is compiled and added, HTML is generated and finally added to the location to be placed.
3 .:
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/122Q2M20-0.png "title =" 1.png" alt = "193473252.png"/>
For example, the number is rendered to the DOM through a template.
Example 2:
A simple and complete code:


<! DOCTYPE html> 
The template above is directly compiled as a string, and then added data for rendering. This is another method.


Summary:
1. Data sources can obtain JSON data files through Ajax, or the server can return JSON-format data through JavaScript.

2. templates can be defined on the page or returned as strings on the server side.
3. The preparation of templates is similar to the nested Java code of JSP pages. Of course<% Xxx %>Separators can be customized.
4. JSON objects are displayed on the page in the form of templates, so that Ajax can obtain JSON data and render the data in the DOM and deliver it to the browser client for processing.
5. for example, in instance 1, five element values are displayed, but only three elements are contained in JSON data. baidutemplate is well processed and replaced with a Null String, rather than an undefined object.
6. baidutemplate Code 200 is good, lightweight, and flexible. There are also many escape character processing, HTML Tag, URL Processing, and so on.
7. An easy-to-use JS tool is worth collecting and using it in a timely manner.


At the same time, we recommend the first open source JavaScript library of baidu: tangram http://tangram.baidu.com/
 
 
This article is from the "wild horse red dust" blog and will not be reposted!