欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Js模板引擎(TrimPath)

 更新時間:2016年11月22日 11:50:36   作者:逆心  
本文詳細介紹了在頁面中引用template.js文件之后,具體的使用方法及實例,有需要的朋友可以參考下

當頁面中引用template.js文件之后,腳本將創(chuàng)建一個TrimPath對象供你使用。

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

  得到頁面中Id為elementId的DOM組件的InnerHTML,將其解析成一個模板,這個返回一個templateObject對象,解析出錯時將拋出一個異常。

  optionalDocument一個可選參數(shù),在使用iframe,frameset或者默認多文檔時會有用,通常用來做模板的DOM元素師一個隱藏的<textarea>。

  以上方法的到的模板(字符串)再經(jīng)過process()方法進一步解析就得到了最終的源代碼。

  如:

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

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

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

  一步到位的方法:

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

  這是一個輔助函數(shù),內(nèi)部調(diào)用TrimPath.parseDOMTemplate()和Process()方法結(jié)果就是經(jīng)過解析后生成的代碼。

  其作用相當于parseDOMTemplate().process(),即從textarea讀取模板后替換數(shù)據(jù)。

  先來看一個最簡單的例子:

<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: "關(guān)云長" };
  var result = TrimPath.processDOMTemplate("temp", data);
  document.getElementById("ShowDiv").innerHTML = result;
</script>

 以上代碼在頁面上輸出:關(guān)云長敗走麥城!

  其實,這個東西與C#,PHP的模板引擎,并沒有本質(zhì)上的區(qū)別,都是讀入模板,然后替換數(shù)據(jù)。只不過,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 == "關(guān)云長"}
    ${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>

 循環(huán)控制(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: "關(guān)羽", Big: "龍卷旋風斬" },
{ Name: "郭嘉", Big: "冰河爆裂破" },
{ Name: "諸葛", Big: "臥龍光線", },
]; //他媽的for循環(huán)多了一次
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

 語法結(jié)構(gòu)如下:

{for varName in listExpr}
主循環(huán)體
{forelse}
當輸入為null,或listExpr數(shù)量為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區(qū)域:

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

 內(nèi)聯(lián)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事件會被觸發(fā),并且此處的注釋沒影響
        }
      {/eval}
    </textarea>
</body>
</html>

<script type="text/javascript">
var data = { Name:"張遼" }; //不輸入就包ul,輸入就包你輸入的那個
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

結(jié)合.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, "關(guān)羽", 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>

輸出結(jié)果如下:

以上就是本文的全部內(nèi)容,希望對大家有所幫助,謝謝對腳本之家的支持!

相關(guān)文章

最新評論