最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错。今天自己玩了一下
后台使用的是.net mvc,数据库脚本就不提供了,返回的JsonResult,将数据存放在data中,前台通过ajax配合模板引擎进行一个调用然后以表格的形式显示数据。
前台html代码:
姓名 | 年龄 | 说明 |
js代码:当然首先你得先导入art-template.js 下载地址:http://aui.github.io/art-template/
重点来说说这里:
首先第一步:加载art-template.js的文件
第二步:定义模板引擎并在里面进行数据的加载吧(个人理解),在网上也找了一下资料,说script type的值不能是text/script,不然会造成无法解析。也就是说除开text/script应该都可以,这里我用的是text/template(原谅我不去度娘)。
第三步:就是处理请求回来的数据怎么显示了,先来看看ajax请求成功后我直接将data存放在template作为第二个参数,第一个参数对应定义模板引擎的id通过最后var去接收。完了以后就是在模板引擎中进行渲染,这里通过each data,这是一种标准语法吧,就好比之前通过模板字符串拼接的一个升级版,当然可能好处更多。data就是后台返回回来的json数据,
通过{{$(value)}}的方式去拿到对应的数据,这样看来比以前foreach循环然后拼接字符串真的好太多,后期维护也比较好。
{{$value.Name}} {{$value.Age}} {{$value.Desc}}{{/each}}
functionGetData() {
$.ajax({
type:"post",
url:"/Test/Index",
data: {},
success:function(data) {var result = template('tbdata', data);
$("#tb").html(result);
}
});
}
后台代码:这里通过ef从数据库加载数据
public classTestController : Controller
{
testDBEntities db=newtestDBEntities();//GET: Test
[HttpPost]publicJsonResult Index()
{var datas =db.Tests.ToList();return Json(new { data =datas });
}
}
最后的显示效果:
第一次玩模板引擎,希望以后会有更多的认识。
来源:oschina
链接:https://my.oschina.net/u/4381476/blog/4375186