详解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)

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

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JQuery实现自定义对话框的代码
Jun 15 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
You might like
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
进一步探究Python中的正则表达式
2015/04/28 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
鸿星尔克广告词
2014/03/21 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL