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 ...
随机推荐
- PHP 正则 空字符 / NUL字符
\xnn 匹配中ASCII代码十六进制代码为nn的字符.[\x00-\x7F] 匹配ASCII值从0-127的字符.0-127表示单字节字符,也就是:数字,英文字符,半角符号,以及某些控制字符. 正则 ...
- 初学UML之-------用例图
本文转载至:http://blog.csdn.net/a649518776/article/details/7493148 一．UML简介 UML(统一建模语言,Unified Modeling L ...
- 机器人学 —— 机器人感知（Mapping）
对于移动机器人来说,最吸引人的莫过于SLAM,堪称Moving Robot 皇冠上的明珠.Perception 服务于 SLAM,Motion Plan基于SLAM.SLAM在移动机器人整个问题框架中 ...
- bootstrap 使用总结
1.如何设置一行两列? <div class="container"> <div class="row"> <div class= ...
- 百度地图API密钥
百度地图API密钥 DD279b2a90afdf0ae7a3796787a0742e nSxiPohfziUaCuONe4ViUP2N /*亲测可用*/ PlhFWpA02aoURjAOpnWcR ...
- Oracle课程档案，第十二天
死锁是由于两个对象在拥有一份资源的情况下申请另一份资源, 而另一份资源恰好又是这两对象正持有的,导致两对象无法完成操作,且所持资源无法释放. 阻塞是由于资源不足引起的排队等待现象. unso:撤销 c ...
- 几个dos命令
- Python学习之旅（十九）
Python基础知识(18):面向对象高级编程(Ⅰ) 使用__slots__:限制实例的属性,只允许实例对类添加某些属性 (1)实例可以随意添加属性 (2)某个实例绑定的方法对另一个实例不起作用 (3 ...
- BOM设计的一些问题及解决方案探讨----合版BOM
BOM是ERP的核心资料,也是比较难的一块,不仅涉及的内容多,要求准确性高,时效性也要求高.但传统的ERP在处理BOM时有不少问题,因此也有些软件公司引入了各种BOM类型,像"标准BOM&q ...
- ArrayList 的代码
public class user { private String userName; //类的构造方法 public user (String userName ){ this.userName= ...