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 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>

　　输出结果如下：

TrimPath - Js模板引擎的更多相关文章

JST(JavaScript Trimpath)前端模板引擎简介
JST(JavaScript Trimpath)前端模板引擎简介及应用今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...
js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

随机推荐

spserver 开源服务器框架研究与分析
网上开源的C/C++服务器框架还是比较少的. 最近研究了 spserver , 里面用了较多的设计模式,使用设计模式的目的是把不变的东西和可变的东西分离并且封装起来,避免以后修改代码, 应用设计模式 ...
屌炸天实战 MySQL 系列教程（二）史上最屌、你不知道的数据库操作
此篇写MySQL中最基础,也是最重要的操作! 第一篇:屌炸天实战 MySQL 系列教程(一) 生产标准线上环境安装配置案例及棘手问题解决第二篇:屌炸天实战 MySQL 系列教程(二) 史上最屌.你不 ...
Java面试题之十
五十六.java中有几种类型的流?JDK 为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类? 主要有字节流,字符流.字节流继承于InputStream .OutputStream,字符流 ...
Google的Protocol Buffer格式分析
[转]转自:序列化笔记之一:Google的Protocol Buffer格式分析从公开介绍来看,ProtocolBuffer(PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.作 ...
Windows通用应用平台
什么是 UWP? 很多程序员都有一个梦想:希望自己开发的软件能够轻而易举的在所有平台上运行,而不是把同样的需求,用不同的技术.工具重新开发才能够运行在所有平台上.这就是跨平台,很多软件从业者都在为这个 ...
修改UISearchBar输入框字体颜色
UITextField *searchField = [mySearchBar valueForKey:@"_searchField"]; searchField.textColo ...
SQL Server,Oracle,DB2索引建立语句的对比
原文引至:http://jvortex.blog.163.com/blog/static/16961890020122141010878/ 我们知道,索引是用于加速数据库查询的数据库对象.原理就是减少 ...
C/C++基本数据类型所占字节数
关于这个主要的问题,非常早曾经就非常清楚了,C标准中并没有详细给出规定那个基本类型应该是多少字节数,并且这个也与机器.OS.编译器有关,比方相同是在32bits的操作系统系,VC++的编译器下int类 ...
30款基本UX工具 - 思维流程工具 & 原型工具
来源:GBin1.com 现在的开发人员在建造网站时,注重的是布局和技术特性,但是往往忽略了更重要的一点,那就是用户体验. 如果用户在使用的时候,不能简单清楚的知道该要如何操作,那么他们一定会选择另 ...
BZOJ 2648/2716(SJY把件-KD_Tree)[Template:KD_Tree]
2648: SJY把件 Time Limit: 20 Sec Memory Limit: 128 MB Submit: 1180 Solved: 391 [id=2648" style= ...

TrimPath - Js模板引擎

TrimPath - Js模板引擎的更多相关文章

随机推荐

热门专题