详解Js模板引擎TrimPath

JavaScript 2019-01-06

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

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

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

　　optionalDocument一个可选参数，在使用iframe,frameset或者默认多文档时会有用，通常用来做模板的DOM元素师一个隐藏的 　　 　　

　　

<script language="javascript">
var data = { Name: "郭嘉" };
var result = TrimPath.processDOMTemplate("temp",data);
document.getElementById("ShowDiv").innerHTML = result;

　循环控制(for forelse /for):

rush:js;"> 　　TrimPath学习测试 　　

　语法结构如下：

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

　　宏定义：

rush:js;"> 　　TrimPath学习测试 　　

　CDATA区域：

rush:js;"> TrimPath学习测试 　　

　内联js：

rush:js;"> 　　TrimPath学习测试 　　

结合.Net MVC后台程序再来一把：

rush:js;"> 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; }

}
}

　前台代码：

rush:js;"> <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> TrimPath学习测试

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

输出结果如下：

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

jstemplate模板引擎

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...