复制代码 代码如下:
$(#div).bindtemplate({
source : json object,
template : null | $(#template) | {{object}}
,
dateformat : d.m.y,
tagopen : {{,
tagclose : }}
});
bindtemplate(data) : 绑定数据对象到模板的操作方法
source : json 格式的数据源
template :
null 不提供模板,innerhtml输出
$(“#template”) 利用页面上定义好的html结构作为模板
“{{...}}
” 直接定义模板
dateformat : 时间的格式化方式
tagopen : 开始的标记标签
tagclose : 结束的标记标签
其中dateformat, tagopen, tagclose都可以为null采用默认的配置, 有必要说一下默认的tagopen & tagclose是用”{{” 和 ”}}”标记的
json2template 的应用
下面我们通过一下小例子来看看json2template的简单用法
创建一个mvc3的空项目
首先我们需要一个对象来存储传递的数据
复制代码 代码如下:
public class userinfo
{
public int id { get; set; }
public string name { get; set; }
public int age { get; set; }
public string address { get; set; }
}
虚拟一个数据集合, 因为实际的应用场景中是通过查询数据库得到的
复制代码 代码如下:
private ilist inituserinfo()
{
ilist users = new list();
users.add(new userinfo() { id = 1, name = chenkun, age = 21, address = suzhou });
users.add(new userinfo() { id = 2, name = zhangsan, age = 21, address = beijing });
users.add(new userinfo() { id = 3, name = lisi, age = 21, address = henan });
users.add(new userinfo() { id = 4, name = wangwu, age = 21, address = shanghai });
users.add(new userinfo() { id = 5, name = zhaoliu, age = 21, address = guangzhou });
users.add(new userinfo() { id = 6, name = huqi, age = 21, address = chongqing });
return users;
}
这些基础的东西准备好了, 我们需要把这个集合序列化成json一便提供给json2template使用, 这里我采用newtonsoft.json! 这里我们需要定义个action
复制代码 代码如下:
public jsonresult getuserinfo()
{
return json(newtonsoft.json.jsonconvert.serializeobject(inituserinfo()), jsonrequestbehavior.allowget);
}
序列化我们的集合为json 并且启用get请求以便ajax通过get方式调用
添加对json2template.js的引用后我们就开始一个ajax请求, 来获取后台的json数据, 再把获取的数据通过bindtemplate来帮定到html模板中显示出来
首先我们定义个简单的html模板:
复制代码 代码如下:
编号姓名年龄地址
{{id}}
{{name}}
{{age}}
{{address}}
{ 注意:把{{item}}定义到class中表示遍历item对象的子集类似forearch }
再定义一个用来输出这个模板的html容器
复制代码 代码如下:
最后按照我们事先构想好的方式来请求json 数据并帮定模板
复制代码 代码如下:
f5运行一下看看效果
比较简单,鉴于从理论上来讲它确实还不错, 故推荐给大家!希望对你有帮助
源代码: sample.json2template.rar