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/5733164.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一、iVX简介(IVX 快速开发教程)

一、iVX简介 通过本节你将对 iVX 有一个大致的认识&#xff0c;并且了解 iVX 能够做些什么&#xff0c;有哪一些优势&#xff0c;这将帮助你更好的上手 iVX 进行应用的开发&#xff0c;初步了解 iVX 的强大之处。 文章目录一、iVX简介1.1 iVX 是什么&#xff1f;1.2 iVX适合怎…

WPF效果第一百八十六篇之又玩ListBox

大周末的接着上一篇玩耍TreeView,这二天又再次去玩耍ListBox;毕竟是我的最爱,没办法就喜欢玩耍他;闲话也不多扯了,直接看咱们最终效果:2、原来一直ItemTemplate,这次直接ListBoxItem的Template:<Setter Property"Template"><Setter.Value><ControlTem…

【十分钟】学会微信小游戏,攀登不止小游戏制作(IVX 快速开发教程十一)

十一、攀登不止小游戏制作 制作微信小游戏大致流程与微信小程序、Web类似&#xff0c;不同的在于是组件的使用。我们此节需要完成的小游戏需求为&#xff1a; 小球触碰矩形块会跳跃或攀爬小球触碰顶部或底部游戏结束点击屏幕将会使小球朝着该方向移动小球进行跳跃时分数会增加…

十天冲刺---Day8

站立式会议 站立式会议内容总结&#xff1a;燃尽图照片最近思考一个问题。项目是怎么进行到这一步的。算了&#xff0c;这个发在明天的冲刺总结吧。。还需继续努力&#xff0c;队友快回来快回来。。转载于:https://www.cnblogs.com/imguang/p/4965054.html

一篇文学会商用可编辑问卷表单制作【iVX 十二】

公共表单 在 iVX 快速教程中&#xff0c;我们使用一个公共表单项目作为 WebApp 应用的演示说明。公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查&#xff0c;用户可以自由的设置表单元素以及样式&#xff0c;并且可以手动设置表单结束下载填写问卷后的调查数据。 …

【地图学】地图投影的定义和分类

一、地图投影 1、地图投影的定义 地图投影是利用一定数学法则把地球表面的经、纬线转换到平面上的理论和方法。 2、地图投影的分类 (1)按变形性质 • 等角投影: 投影面上两微分线段的夹角与地面上的相应两线段的夹角相等,及没有角度变形的投影叫 ~ 。

React-引领未来的用户界面开发框架-读书笔记(八)

第16章 架构模式 React主要功能在于渲染HTML。可以将其看成是MVC中的V&#xff0c;它不会影响到组件中直接调用AJAX请求之类的操作&#xff1a; var TakeSurveyReact.CreateClass({getInitialData&#xff1a;function(){return{survey:null}&#xff1b;},componentDidMount:…

confluence5.8.10的使用

之前在windows上安装了confluence5.8.10,结果有一天知什么缘故&#xff0c;数据库数据损坏&#xff0c;知识库彻底打不开了&#xff0c;所有的文档都付之东流&#xff0c;真的不是一般心痛。因此考虑将其装到linux机器上&#xff0c;因为tomcat和mysql实际上都为了linux而生的&…

Android之提示Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider

1 问题 接入SDK提示错误如下 java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider: java.lang.IllegalStateException: 2 解决办法 在AndroidManifest.xml文件下面配置如下 在application目录下面配置如下&#xff0c;…

RPA之PAD(Power Automate Desktop)组件开发

本文由网友蓝创精英团队投稿&#xff0c;欢迎转载、分享原文作者&#xff1a;蓝创精英团队原文链接&#xff1a;https://blog.csdn.net/i2blue/article/details/125040323其实&#xff0c;PAD&#xff0c;现在官方文档还没有对外组件式或者插件式开发接口。但是&#xff0c;有一…

【地图学】高斯-克吕格(Gauss-Kruger)投影原理、应用详解(3°带、6°带)

一、高斯克吕格投影概述 德国数学家、物理学家、天文学家高斯于19 世纪20 年代拟定,后经德国大地测量学家克吕格于1912 年对投影公式加以补充,故称为高斯-克吕格投影(Gauss-Kruger,简称GK),又名"等角横切椭圆柱投影”。中央经线和赤道投影为相互垂直的直线,其它经线…

小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

octave中的一些基本操作

1.矩阵的表示&#xff1a;v [1 2 2] %表示1行3列的矩阵 v [1; 2; 2] %表示3行1列的矩阵 v [1 2; 2 3; 4 5] %3*2矩阵 size(v) % 求v的行与列 length(v) %求v的列 2.几个基本矩阵的表示&#xff1a;1&#xff09;s ones(2, 4) %2*4全1矩阵 2&#xff09;m zeros(3, 4) %3…

【大地信】新时代GIS发展趋势与未来展望

一、你必须知道的国内外知名学者 1. RogerTomlinson(罗杰汤姆林森)---GIS之父 Roger Tomlinson从1963年开始创建世界上第一个地理信息系统,即加拿大地理信息系统(CGIS)。因此,Tomlinson被誉为地理信息系统之父。 RogerTomlinson(1933.12---2014.2.9) 2. Michael Fran…

小程序获取头像试试水 02《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

zookeeper 入门讲解实例 转

转 http://www.blogjava.net/BucketLi/archive/2010/12/21/341268.htmlzookeeper使用和原理探究&#xff08;一&#xff09;zookeeper介绍zookeeper是一个为分布式应用提供一致性服务的软件&#xff0c;它是开源的Hadoop项目中的一个子项目&#xff0c;并且根据google发表的&l…

小程序仿微信发现页 03《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

Silverlight与WCF之间的通信(4)silverlight以net.tcp方式调用console上寄宿的wcf服务

&#xff08;由于最近是针对一个demo进行的研究&#xff0c;在之前公开过代码结构&#xff0c;这里只是对需要改动的地方加以说明&#xff09; WCF4.0使得编写wcf服务不再那么复杂&#xff0c;去掉了许多的配置信息&#xff0c;客户端只需要一个服务地址&#xff0c;便可在系统…

Maui学习之路(一)--Windows窗体设置

Maui的学习之路作为 Maui的先行者&#xff0c;我有话要说&#xff0c;微软你为了让我成为牛 B 的程序员真的是煞费苦心&#xff0c;你一定是觉得我不够牛逼所以针对我&#xff0c;存心想气死我。好了废话不多说&#xff0c;Maui现在也算是正式发布了&#xff0c;我有点想用它来…

Git 常用命令大全

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码&#xff0c;管理私人的文档和源代码也有很多优势。 Git常用操作命令&#xff1a; 1) 远程仓库相关命令 检出仓库&#xff1a;$ git clone git://github.com/jquery/jquery.git 查看远程仓库&#…