详解Js模板引擎(TrimPath)
作者:逆心 发布时间:2024-04-10 13:55:36
当页面中引用template.js文件之后,脚本将创建一个TrimPath对象供你使用。
parseDOMTemplate(elementId,optionalDocument)//获得模板字符串代码
得到页面中Id为elementId的DOM组件的InnerHTML,将其解析成一个模板,这个返回一个templateObject对象,解析出错时将抛出一个异常。
optionalDocument一个可选参数,在使用iframe,frameset或者默认多文档时会有用,通常用来做模板的DOM元素师一个隐藏的<textarea>。
以上方法的到的模板(字符串)再经过process()方法进一步解析就得到了最终的源代码。
如:
var result = parseDOMTemplate(elementId,optionalDocument).process();//用数据替换模板
这个方法也直接能用于解析字符串:
var data = { Name:"张辽" }; //不输入就包ul,输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
alert("hello ${Name}".process(data)); //process()就是一个将数据解析模板的函数,这里输出hello,张辽
一步到位的方法:
TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)
这是一个辅助函数,内部调用TrimPath.parseDOMTemplate()和Process()方法结果就是经过解析后生成的代码。
其作用相当于parseDOMTemplate().process(),即从textarea读取模板后替换数据。
先来看一个最简单的例子:
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display:none;">
${Name}败走麦城!
</textarea>
</body>
</html>
<script language="javascript">
var data = { Name: "关云长" };
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
以上代码在页面上输出:关云长败走麦城!
其实,这个东西与C#,PHP的模板引擎,并没有本质上的区别,都是读入模板,然后替换数据。只不过,C#与PHP等后台语言,一般都从文件里面读取模板,如Html,txt等。而TrimPath就从<textarea></textarea>标签上读取模板。
条件控制示例(if () else()):
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display:none;">
{if Name == "关云长"}
${Name}龙卷旋风斩!
{elseif Name == "郭嘉"}
${Name}冰河爆裂破!
{else}
${Name}放大!
{/if}
</textarea>
</body>
</html>
<script language="javascript">
var data = { Name: "郭嘉" };
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
循环控制(for forelse /for):
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display: none;">
<table width="400" cellspacing="0" cellpadding="0" border="1">
{for i in data}
<tr>
<td>${i.Name}</td>
<td>${i.Big}</td>
</tr>
{/for}
</table>
</textarea>
</body>
</html>
<script type="text/javascript">
var data = [
{ Name: "关羽", Big: "龙卷旋风斩" },
{ Name: "郭嘉", Big: "冰河爆裂破" },
{ Name: "诸葛", Big: "卧龙光线", },
]; // * for循环多了一次
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
语法结构如下:
{for varName in listExpr}
主循环体
{forelse}
当输入为null,或listExpr数量为0时
{/for}
宏定义:
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display: none;">
{macro htmlList(list, optionalListType)}
{var listType = optionalListType != null ? optionalListType : "ul"}
<${listType}>
{for item in list}
<li>${item}</li>
{/for}
</${listType}>
{/macro}
${htmlList(["AA","BB","CC"], "")}
</textarea>
</body>
</html>
<script type="text/javascript">
var data = {}; //不输入就包ul,输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
CDATA区域:
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display: none;">
{cdata}${Name}{/cdata} 被解释成了 ${Name}
</textarea>
</body>
</html>
<script type="text/javascript">
var data = { Name:"张辽" }; //不输入就包ul,输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
内联js:
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display: none;">
<select onchange="sel_onchange()">
<option value="1">1</option>
<option value="2">2</option>
</select>
{eval}
sel_onchange = function() {
alert('我不小心被change了'); //此js事件会被触发,并且此处的注释没影响
}
{/eval}
</textarea>
</body>
</html>
<script type="text/javascript">
var data = { Name:"张辽" }; //不输入就包ul,输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
结合.Net MVC后台程序再来一把:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace 测试jQuery_EasyUI.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetJson()
{
Person p1 = new Person(1, "刘备", 30);
Person p2 = new Person(2, "关羽", 28);
Person p3 = new Person(3, "张飞", 36);
List<Person> ListPerson = new List<Person>();
ListPerson.Add(p1);
ListPerson.Add(p2);
ListPerson.Add(p3);
return Json(ListPerson,JsonRequestBehavior.AllowGet);
}
}
public class Person
{
public Person(int id, string name, int age) { Id = id; Name = name; Age = age; }
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}
前台代码:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<html>
<head>
<title>TrimPath学习测试</title>
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
<div id="ShowDiv">
</div>
<textarea id="temp" style="display: none;">
<table width="400" cellspacing="0" cellpadding="0" border="1">
<tr>
<td>Id</td>
<td>姓名</td>
<td>年龄</td>
</tr>
{for i in data}
<tr>
<td>${i.Id}</td>
<td>${i.Name}</td>
<td>${i.Age}</td>
</tr>
{/for}
</table>
</textarea>
</body>
</html>
<script type="text/javascript">
var data;
$(function() {
$.ajax({
url: "/Home/GetJson",
type: 'post',
async: true,
dataType: 'json',
success: function(response) {
data = response;
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
}
})
})
</script>
输出结果如下:
来源:http://www.cnblogs.com/kissdodog/p/3299174.html
猜你喜欢
- base64模块是用来作base64编码解码的。这种编码方式在电子邮件中是很常见的。它可以把不能作为文本显示的二进制数据编码为可显示的文本信
- 前几天一直在寻找能够输出python函数运行时最大内存消耗的方式,看了一堆的博客和知乎,也尝试了很多方法,最后选择使用memory_prof
- 本文实例讲述了Python学习笔记之读取文件、OS模块、异常处理、with as语法。分享给大家供大家参考,具体如下:文件读取#读取文件f
- 1. IO多路复用O多路复用技术是使用一个可以同时监视多个IO阻塞的中间人去监视这些不同的IO对象,这些被监视的任何一个或多个IO对象有消息
- 如下所示:import pandas as pddef my_min(a, b): return min(abs(a),abs(
- 一、MySQL5.6安装后,不能正常启用压缩版MySQL,解压完后在:我的电脑->属性->高级->环境变量选择PATH,在
- 这篇文章主要介绍了python连接字符串过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 最近需要将使用keras训练的模型移植到手机上使用, 因此需要转换到tensorflow的二进制模型。折腾一下午,终于找到一个合适的方法,废
- 本文介绍了python画图时设置分辨率和画布大小的实现,主要使用plt.figure(),下面就一起来了解一下plt.figure()示例:
- 在写sql的时候,由于有部分语句别名不能调用,百度了一下原因,原来是由于别名机制不同引起的。为了避免下一次再犯同样的错误,今天把网上找到资料
- 本文实例讲述了python中readline判断文件读取结束的方法。分享给大家供大家参考。具体分析如下:大家知道,python中按行读取文件
- 浅谈NumPy中的维度AxisNumPy中的维度是一个很重要的概念,很多函数的参数都需要给定维度Axis,如何直观的理解维度呢?我们首先以二
- mysql创建用户并授权:格式:grant 权限 on 数据库名.表名 to 用户@登录主机 identified by "用户密
- 数模比赛中,常常需要对数据进行处理和分析,但
- 前言最近有文字转图片的需求,但是不太想下载 APP,就使用 Python Pillow 实现了一个,效果如下:PIL 提供了 PIL.Ima
- Beautiful Soup是一种Python的解析库,主要用于解析和处理HTML/XML内容。它是基于Python的标准库和第三方库的结合
- Protobuf是什么Protobuf实际是一套类似Json或者XML的数据传输格式和规范,用于不同应用或进程之间进行通信时使用。通信时所传
- 正在看的ORACLE教程是:在ORACLE移动数据库文件。  
- 提到SQL Server 2005证书,很多人可能以为它只是用来在传输数据的时候起到加密作用的,但在深入了解后,你会发现它的用处还有很多。
- 初识项目打开VS2015,创建Web项目,选择ASP.NET Web Application,在弹出的窗口里选择ASP.NET 5 Webs