详解Js模板引擎（TrimPath）
作者：逆心 发布时间：2024-04-10 13:55:36
标签：js,模板引擎,TrimPath
当页面中引用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
0
投稿猜你喜欢
因为他的简单实用和数量庞大的插件，所以我们喜欢和使用jQuery，在jQuery数量庞大的插件中有很大的一部分是关于图片的，所以今天我们就整- 目录一、 文件的操作1.1创建文件1.2写入数据1.3读数据1.4 2读数据1.5读写数据1.6删除文件1.7写入文件1.8读取图片1.9备
- 我们在使用GPU资源进行训练的时候，可能会发生资源耗尽的情况，那么在在这种情况，我们需要对GPU的资源进行合理的安排，具体使用办法如下：框架
- 前言通常我们需要编写好的错误处理方式，在了避免某些程序员滥用异常，于是Go这里直接把异常这一块给砍掉了，最终还是通过返回值来判断程序的异常情
- 本文实例讲述了Python Flask框架模板操作。分享给大家供大家参考，具体如下：模板在前面的示例中，视图函数的主要作用是生成请求的响应，
- 1.物体识别本案例实现对特殊颜色物体的识别，并实现根据物体位置的改变进行控制跟随。import cv2 as cv# 定义结构元素kerne
- 一、安装前准备查看数据库版本命令： mysql --versionmysql-community-common-8.0.17-1.el7.x
- 这篇文章主要介绍了Python线程条件变量Condition原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- 代码如下:'================================================== '函数名：
- 源码下载地址网络构建一、什么是SRGANSRGAN出自论文Photo-Realistic Single Image Super-Resolu
- 在数组中搜索一个特定值，如果找到返回TRUE否则返回FALSE boolean in_array(mixed needle,array ha
- 本篇博客介绍利用python脚本实现视频分帧，并将每一帧保存到本地。主要基于opencv包来实现，在运行代码前确保opencv包已正确安装。
- golang 空结构体 struct{} 可以用来节省内存a := struct{}{}println(unsafe.Sizeof(a))/
- 1. 下载RPM安装包， 因为安装MySQL的时候，软件会需要一依赖关系， 所以建议把所有的安装包下载下载， 再依次安装所以的RPM包。 2
- 微信小程序实现人脸识别，具体应用场景 前端实现人脸信息采集 拍到正面照片 发送给后端该方法暂
- 信息安全的核心就是数据库的安全，也就是说数据库加密是信息安全的核心问题。数据库数据的安全问题越来越受到重视，数据库加密技术的应用极大的解决了
- 在使用Jupyter notebook时有这么一句代码start_frame = imread(“OwnCollection\vehicle
- function formatNum(num){ if
- 目录列表拼接三种方式方式一：简简单单的“+”方法二：切片赋值方式三：列表自带的extend()列表去重的三种方式利用集合set的特性利用字典
- SqlServer将数据库中的表复制到另一个数据库一、如果两个数据库在同一台服务器上1、复制表结构和数据(A->B)：SELECT *
