TrimPath - Js模板引擎

　　当页面中引用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 οnchange="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>

　　输出结果如下：

转载于:https://www.cnblogs.com/zhishaofei/p/4269300.html

TrimPath - Js模板引擎相关推荐

js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
js模板引擎之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...
简单实用的js模板引擎
转自:微点阅读 https://www.weidianyuedu.com 不足50行的js模板引擎,支持各种js语法: <script id="test_list" typ ...
doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

TrimPath - Js模板引擎

TrimPath - Js模板引擎相关推荐

最新文章

热门文章