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 ...
随机推荐
- java基础---->String中replace和replaceAll方法
这里面我们分析一下replace与replaceAll方法的差异以及原理. replace各个方法的定义 一.replaceFirst方法 public String replaceFirst(Str ...
- 进程池的回调函数callback
如下代码: from multiprocessing import Pool def func1(n): print('in func1') return n*n def func2(nn): pri ...
- PHP计算显示平均温度、五个最低及最高温度
<?php $month_temp = "78, 60, 62, 68, 71, 68, 73, 85, 66, 64, 76, 63, 81, 76, 73, 68, 72, 73, ...
- gnome-shell 扩展
application menu topicons plus dash to dock native window placement netspeed no topleft hot corner o ...
- hdu 4544——消灭兔子
游戏规则很简单,用箭杀死免子即可. 箭是一种消耗品,已知有M种不同类型的箭可以选择,并且每种箭都会对兔子造成伤害,对应的伤害值分别为Di(1 <= i <= M),每种箭需要一定的QQ币 ...
- Tomact优化
一.版本信息隐藏 1.修改conf/web.xml,重定向403.404以及500等错误到指定的错误页面: 2.也可以通过修改应用程序目录下的WEB-INF/web.xml下的配置进行错误页面的重定向 ...
- PHP（javascript基础）
js浏览器的脚本语言js的基础语法和 . js Dom操作写法分类1.行内(内联)写在标签里面,以属性的形式表现,属性名是“事件属性名” 例如:<button onClick="js代 ...
- allegro画元件封装
LP Wizard 10.5 根据标准,输入datasheet的尺寸,可以计算出推荐的焊盘和封装. 封装必须画的层: 1.引脚 2.pakage-> 2.1.assembly_top,add线( ...
- SparkContext初始化之SparkScheduler初始化
- PostgreSQL 自动输入密码（转）
原文:https://www.cnblogs.com/litmmp/p/5122534.html 在 Shell 命令行中,使用 postgresql-client 连接 PostgreSQL 数据库 ...