TrimPath - Js模板引擎

時間 2019-11-12

原文原文鏈接

　　當頁面中引用template.js文件以後，腳本將建立一個TrimPath對象供你使用。javascript

parseDOMTemplate(elementId,optionalDocument)　　//得到模板字符串代碼

　　獲得頁面中Id爲elementId的DOM組件的InnerHTML，將其解析成一個模板，這個返回一個templateObject對象，解析出錯時將拋出一個異常。
　　optionalDocument一個可選參數，在使用iframe,frameset或者默認多文檔時會有用，一般用來作模板的DOM元素師一個隱藏的<textarea>。html

　　以上方法的到的模板(字符串)再通過process()方法進一步解析就獲得了最終的源代碼。
　　如:java

var result = parseDOMTemplate(elementId,optionalDocument).process();　　//用數據替換模板

　　這個方法也直接能用於解析字符串:jquery

var data = { Name:"張遼" }; 　　　　　　//不輸入就包ul，輸入就包你輸入的那個
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
alert("hello ${Name}".process(data)); //process()就是一個將數據解析模板的函數，這裏輸出hello,張遼

　　一步到位的方法：ajax

TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)

　　這是一個輔助函數，內部調用TrimPath.parseDOMTemplate()和Process()方法結果就是通過解析後生成的代碼。json

　　其做用至關於parseDOMTemplate().process()，即從textarea讀取模板後替換數據。async

　　先來看一個最簡單的例子：函數

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

　　以上代碼在頁面上輸出：關雲長敗走麥城!post

　　其實，這個東西與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>