首页
所有分类
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常考语句107条收集
Mar 09 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
详解如何在Vue项目中导出Excel
Apr 19 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
Xpath(1) 抖音(1) LOGO(1) Counter(1) 写入策略(1) pip(1) most_common(1) 爬虫(2) binlog(2) MIME(1)
You might like
jQuery插件开发全解析
2012/10/10 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
Easyui的组合框的取值与赋值
2016/10/28 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
js中DOM事件绑定分析
2018/03/18 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Python中的字典遍历备忘
2015/01/17 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
比驿：全球酒店比价网
2018/06/20 全球购物
澳大利亚100%丝绸多彩度假装商店：TheSwankStore
2019/09/04 全球购物
营销总监岗位职责范本
2014/02/26 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers