Json2template.js a jquery-based plug-in binding JavaScript object into an HTML template _jquery

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