博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
TrimPath - Js模板引擎
阅读量:5319 次
发布时间:2019-06-14

本文共 3933 字,大约阅读时间需要 13 分钟。

 当页面中引用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读取模板后替换数据。

  先来看一个最简单的例子:

        TrimPath学习测试          
  
  

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

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

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

        TrimPath学习测试          
  
  

  循环控制(for forelse /for):

  TrimPath学习测试    
  
  

  语法结构如下:

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

  宏定义:

  TrimPath学习测试    
  
  

  CDATA区域:

TrimPath学习测试    
  
    

  内联js:

  TrimPath学习测试    
  
    

  结合.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
ListPerson = new List
(); 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" %>    TrimPath学习测试                

  输出结果如下:

  

转载于:https://www.cnblogs.com/zhishaofei/p/5733164.html

你可能感兴趣的文章
Android应用程序安装过程浅析
查看>>
Crazyflie 2.0 System Architecture
查看>>
用react native 做的一个推酷client
查看>>
B. Ohana Cleans Up(Codeforces Round #309 (Div. 2))
查看>>
Vim 简易配置
查看>>
电梯UI部分
查看>>
2016.07.15
查看>>
Vue.js 3.0 新特性预览
查看>>
checkbox中把选项文字与小圆圈关联上
查看>>
django admin后台显示中文
查看>>
git命令提交新项目
查看>>
CSS盒模型
查看>>
Say Hello to ConstraintLayout
查看>>
Xcode中实现ARC和MRC混编
查看>>
LINUX的磁盘管理du命令详解
查看>>
Double Dispatch讲解与实例-面试题
查看>>
ivew Upload 上传图片组件
查看>>
C#-多态
查看>>
如果做好测试PM【转载】
查看>>
数据表行转列
查看>>