详解Js模板引擎（TrimPath）

当页面中引用template.js文件之后，脚本将创建一个TrimPath对象供你使用。

parseDOMTemplate(elementId,optionalDocument)　　//获得模板字符串代码

　　得到页面中Id为elementId的DOM组件的InnerHTML，将其解析成一个模板，这个返回一个templateObject对象，解析出错时将抛出一个异常。

　　optionalDocument一个可选参数，在使用iframe,frameset或者默认多文档时会有用，通常用来做模板的DOM元素师一个隐藏的。</p> <p>　　以上<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>的到的模板(字符串)再经过process()<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>进一步解析就得到了最终的源<a href="/tag/daima/" target="_blank" class="keywords">代码</a>。</p> <p>　　如:</p> <p><code>var result = parseDOMTemplate(elementId,optionalDocument).process();　　//用数据替换模板</code></p> <p>　　这个<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>也直接能用于解析字符串:</p> <div class="jb51code"> <pre class="brush:js;"> var data = { Name:"张辽" }; 　　　　　　//不输入就包ul，输入就包你输入的那个 var result = TrimPath.processDOMTemplate("temp",data); document.getElementById("ShowDiv").innerHTML = result; alert("hello ${Name}".process(data)); //process()就是一个将数据解析模板的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，这里<a href="/tag/shuchu/" target="_blank" class="keywords">输出</a>hello,张辽</pre> </div> <p>　　一步到位的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>：</p> <p><code>TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)</code></p> <p>　　这是一个辅助<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，内部<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>TrimPath.parseDOMTemplate()和Process()<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>结果就是经过解析后<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>。</p> <p>　　其作用相当于parseDOMTemplate().process()，即从textarea读取模板后替换数据。</p> <p>　　先来看一个最简单的例子：</p> <div class="jb51code"> <pre class="brush: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;"> 　　　　${Name}败走麦城! 　　　　　　

　语法结构如下：

{for varName in listExpr} 主循环体 {forelse} 当输入为null，或listExpr数量为0时 {/for}

　　宏定义：

　　TrimPath学习测试　　

　CDATA区域：

TrimPath学习测试　　

　内联js：

　　TrimPath学习测试　　

结合.Net 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; }

}
}

　前台代码：

TrimPath学习测试

$(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;
    }
  })
})

输出结果如下：

以上就是本文的全部内容，希望对大家有所帮助，谢谢对编程之家的支持！

js template template template 模板引擎

上一篇：使用JS批量选中功能实现更改数据库下一篇：基于js实现checkbox批量选中操作

详解Js模板引擎（TrimPath）

猜你在找的JavaScript相关文章