Copy Code code as follows:
$ ("#div"). Bindtemplate ({
Source:json object,
Template:null | $ ("#template") | "<div>{{object}}</div>",
DateFormat: "D.m.y",
Tagopen: "{{",
Tagclose: "}}"
});
Bindtemplate (data): How to bind an object to a template
Data source in Source:json format
Template:
Null does not provide a template, innerHTML output
$ ("#template") using the HTML structure defined on the page as a template
"<div>{{...}}" </div> "define templates directly
DateFormat: How time is formatted
Tagopen: Start tag label
Tagclose: End of Tag label
where DateFormat, Tagopen, tagclose can use the default configuration for null, it is necessary to say that the default Tagopen & Tagclose is marked with "{{" and "}}"
The application of Json2template
Let's take a little example to see the simple use of json2template
To create a MVC3 empty project
First we need an object to store the passed data
Copy Code code as follows:
public class UserInfo
{
public int ID {get; set;}
public string Name {get; set;}
public int Age {get; set;}
public string Address {get; set;}
}
A virtual set of data, because the actual scenario is obtained by querying the database
Copy Code code as follows:
Private ilist<userinfo> Inituserinfo ()
{
ilist<userinfo> users = new list<userinfo> ();
Users. ADD (New UserInfo () {ID = 1, Name = "Chenkun", age = N, address = "Suzhou"});
Users. ADD (New UserInfo () {ID = 2, Name = "Zhangsan", age = N, address = "Beijing"});
Users. ADD (New UserInfo () {ID = 3, Name = "Lisi", age = N, address = "Henan"});
Users. ADD (New UserInfo () {ID = 4, Name = "Wangwu", age = N, address = "Shanghai"});
Users. ADD (New UserInfo () {ID = 5, Name = "Zhaoliu", age = N, address = "Guangzhou"});
Users. ADD (New UserInfo () {ID = 6, Name = "Huqi", age = N, address = "Chongqing"});
return to users;
}
These basics are ready, and we need to serialize this set to Json for json2template use, and here I use newtonsoft.json! Here we need to define an action
Copy Code code as follows:
Public Jsonresult GetUserInfo ()
{
Return Json (Newtonsoft.Json.JsonConvert.SerializeObject (Inituserinfo ()), jsonrequestbehavior.allowget);
}
Serializes our collection to JSON and enables the GET request so that Ajax is called by the Get method
After adding a reference to Json2template.js, we started an AJAX request to get the JSON data back in the background and then bindtemplate the captured data to the HTML template.
First we define a simple HTML template:
Copy Code code as follows:
<div id= "Template-userinfo" style= "Display:none" >
<table width= "100%" >
<tr><th> number </th><th> name </th><th> age </th><th> Address </th></tr >
<tr class= ' {{item}} ' >
<td>{{ID}}</td>
<td>{{Name}}</td>
<td>{{Age}}</td>
<td>{{Address}}</td>
</tr>
</table>
</div>
{Note: the {{item}} is defined in class to indicate traversing a subset of the item object like Forearch}
Then define an HTML container to output this template
Copy Code code as follows:
<div id= "UserList" ></div>
Finally, we're going to request JSON data and help set the template in the way we conceived
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
var datasouce = {};
$.ajax (
{
URL: '/home/getuserinfo ',
DataType: "JSON",
Success:function (data) {
Datasouce.item = json.parse (data);
$ ("#userlist"). Bindtemplate ({source:datasouce, Template: $ ("#template-userinfo")});
}
});
});
</script>
F5 run for a look at the effect
Relatively simple, in view of theoretically it is really good, so recommended to everyone! I hope it will help you.
Source code: Sample.Json2Template.rar
