首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解Js模板引擎（TrimPath）

Posted in Javascript onNovember 22, 2016

当页面中引用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>

输出结果如下：

详解Js模板引擎（TrimPath）

以上就是本文的全部内容，希望对大家有所帮助，谢谢对三水点靠木的支持！

详解Js模板引擎（TrimPath）

- Author -

逆心

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
详谈javascript中的cookie
Jun 03 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
JavaScript学习笔记之检测客户端类型是（引擎、浏览器、平台、操作系统、移动设备）
Dec 03 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
详解http访问解析流程原理
Oct 18 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
使用JS批量选中功能实现更改数据库中的status状态值（批量展示）
Nov 22 #Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 #Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 #Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 #Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
javascript入门之string对象【新手必看】
Nov 22 #Javascript
enumerate(1) list(1) Bean(3) IOC(3) zip(1) csv(4) 进销存(1) metaclass(1) 自动化(1) find(1)
You might like
使用eAccelerator加密PHP程序
2008/10/03 PHP
php制作简单模版引擎
2016/04/07 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了
2007/12/08 Javascript
jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页
2008/12/25 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js确定对象类型方法
2012/03/30 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
js判断浏览器的环境（pc端，移动端，还是微信浏览器）
2020/12/24 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
python读取Android permission文件
2013/11/01 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python实现读取json文件到excel表
2017/11/18 Python
python获取地震信息 微信实时推送
2019/06/18 Python
通过cmd进入python的步骤
2020/06/16 Python
SmartBuyGlasses美国官网：太阳眼镜和眼镜
2017/08/20 全球购物
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书