javascript Template tmpl
前两天写前端遇到很多table 和 表单需要拼接的问题 ， 一堆的字符串 ， 页面显得冗长，又不好维护。于是有了下文。
话不多说，上代码：
首先引用一个js文件：
<script src="~/Content/js/tmpl.min.js"></script>
前台：
<body>
<div>
<p id="result">
<script type="text/x-tmpl" id="tmp">
//“o”官方给的解释是对模板函数的数据参数的引用
<span>{%=o.name%}</span>
<span>{%=o.sex%}</span>
<table class="table table-">
{% for(var i=0;i<o.list.length;i++){ %}
<tr><td>a</td><td>{%=o.list[i].a%}</td></tr>
<tr><td>b</td><td>{%=o.list[i].b%}</td></tr>
{% } %}
</table>
</script>
</p>
</div>
</body> <script>
$(document).ready(function () {
GetData();
});
function GetData() {
$.ajax({
type: "get",
url: "/default1/data",
dataType: "json",
success: function (obj) {
//obj是字符串，转成json对象需要加"("+obj+")"
var o = eval("("+obj+")"); document.getElementById("result").innerHTML = tmpl('tmp', o);
}
});
}
</script>
数据从这里来：
public JsonResult Data()
{
var json = "{'name':'小明','sex':'男','list':[{'a':'1','b':'2'},{'a':'3','b':'4'}]}";
return Json(json, JsonRequestBehavior.AllowGet);
}
附带tmpl.js:https://files.cnblogs.com/files/tony-brook/JavaScript-Templates-3.6.0.rar
javascript Template tmpl的更多相关文章
- 如何选择Javascript模板引擎（javascript template engine)？
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
- jquery.tmpl.js使用外部 jQuery Template文件
$.get('/js/templates/filename.html', function(template) { $.tmpl(template, data).appendTo('#whatever ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
- 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- JavaScript模板引擎
JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript模板引擎实例应用（转）
本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...
随机推荐
- 查询表DML和DDL操作的最后时间
查询test表DML操作的最后时间的语句: select max(ora_rowscn),to_char(scn_to_timestamp(max(ora_rowscn)),'yyyy-mm-dd h ...
- ef报错：实体类型XXX不是当前上下文的模型的一部分。
可能原因:.net框架版本与实体框架版本不匹配,比如:.net框架版本为4.5.实体框架版本为6.2. 解决方法:将实体框架版本降到6.0.
- gym 101657 D
理论1A. //没删debug的文件读入.. 傻逼题. 先求出来每条边两侧的三角形,然后枚举边,根据叉积判断三角形位置,建图,拓扑排序. #include <bits/stdc++.h> ...
- FatMouse' Trade（杭电ACM---1009）
FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- vue里computed的get和set
computed里的对象有get和set方法. get是当该对象所依赖的变量发生变化是执行,重新returncomputed结果. set是该对象的值变化时会执行,并且将变化的结果作为参数传进set里 ...
- python特殊函数__str__、__repr__和__len__
1.__str__ 首先介绍__str__ class Students(object): def __init__(self, *args): self.names = args # def __s ...
- mysql批量插入
有多种方式 其中效率高 要求低的方式 是 把sql拼接出来 后一次性commit: eg: public int insertBatch(List<PeccDetailModel> lis ...
- sqlserver为不同数据库建立不同访问权限的帐号
正式服务器中,为了安全.互不干扰,会给个DB库分配不同的账号,A库有ARead\AReadWrite\AOwn账号,B库有BRead\BReadWrite\BOwn账号.需要配置出来,甚至还能限制AR ...
- 在centos7下安装python3的步骤
环境搭建 准备工具: centos7:http://mirror.bit.edu.cn/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso virtus ...
- python 发送带附件的邮件
特别注意的地方:filespart.add_header("Content-Disposition","attachment",filename=file_na ...