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模板引擎

你可能感兴趣的:(Path)