DDR爱好者之家

详解Js模板引擎（TrimPath）
站长资源 2024/11/28 佚名
40 1538
DDR爱好者之家 Design By 杰米

当页面中引用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="/UploadFiles/2021-04-02/template.js">


　以上代码在页面上输出：关云长败走麦城!


　　其实，这个东西与C#，PHP的模板引擎，并没有本质上的区别，都是读入模板，然后替换数据。只不过，C#与PHP等后台语言，一般都从文件里面读取模板，如Html,txt等。而TrimPath就从<textarea></textarea>标签上读取模板。


　　条件控制示例(if () else())：





<html> 
　　<head> 
　　　　<title>TrimPath学习测试</title>
　　　　<script src="/UploadFiles/2021-04-02/template.js">


　循环控制(for forelse /for):





<html>
<head>
　　<title>TrimPath学习测试</title>
　　<script src="/UploadFiles/2021-04-02/template.js">


　语法结构如下：


{for varName in listExpr} 

主循环体

{forelse} 

当输入为null，或listExpr数量为0时

{/for}


　　宏定义：





<html>
<head>
　　<title>TrimPath学习测试</title>
　　<script src="/UploadFiles/2021-04-02/template.js">


　CDATA区域：





<html>
<head>
<title>TrimPath学习测试</title>
　　<script src="/UploadFiles/2021-04-02/template.js">


　内联js：





<html>
<head>
　　<title>TrimPath学习测试</title>
　　<script src="/UploadFiles/2021-04-02/template.js">


结合.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="/UploadFiles/2021-04-02/jquery.min.js">


输出结果如下：




详解Js模板引擎（TrimPath）


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


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
ddrfans.com
                                            
                                                DDR爱好者之家 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米