复制代码 代码如下:
$("#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
{
IList
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模板:
复制代码 代码如下:
{ 注意:把{{item}}定义到class中表示遍历item对象的子集类似forearch }
再定义一个用来输出这个模板的html容器
立即学习“Java免费学习笔记（深入）”；
复制代码 代码如下:
最后按照我们事先构想好的方式来请求json 数据并帮定模板
复制代码 代码如下:
<script type="text/javascript"> <br>$(document).ready(function () { <br>var dataSouce = {}; <br>$.ajax( <br>{ <br>url: '/home/getuserinfo', <br>dataType: "json", <br>success: function (data) { <br>dataSouce.item = JSON.parse(data); <br>$("#userlist").bindTemplate({ source: dataSouce, template: $("#template-userinfo") }); <br>} <br>}); <br>}); <br></script>
F5运行一下看看效果
比较简单,鉴于从理论上来讲它确实还不错, 故推荐给大家!希望对你有帮助
<script type="text/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"> if ($ != jQuery) { $ = jQuery.noConflict(); } var isLogined = false; var cb_blogId = 77643; var cb_entryId = 2228585; var cb_blogApp = "chenkun"; var cb_blogUserGuid = "7a496d30-ab72-de11-be36-001cf0cd104b"; var cb_entryCreatedDate = '2011/10/29 15:05:00'; </script>
