首页
所有分类
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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
使用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
linux(15) JSON(10) pyqt5(3) Slice(1) pygame(3) pycharm(6) DFA(1) MapReduce(1) Qlabel(1) css3 (2)
You might like
php.ini中文版
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python http接口自动化脚本详解
2018/01/02 Python
python cumsum函数的具体使用
2019/07/29 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python 获取异常（Exception）信息的几种方法
2020/12/29 Python
宠物店的创业计划书范文
2014/01/11 职场文书
自荐信的基本格式
2014/02/22 职场文书
心理学培训心得体会
2016/01/22 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
win7配置本地ftp服务器的图文教程
2022/08/05 Servers