广告合作QQ：76874919

详解Js模板引擎（TrimPath）

JavaScript 2019-01-06

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

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

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

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

　　

<script type="text/javascript">
var data = [
{ Name: "关羽",Big: "龙卷旋风斩" },{ Name: "郭嘉",Big: "冰河爆裂破" },{ Name: "诸葛",Big: "卧龙光线",},]; //他妈的for循环多了一次
var result = TrimPath.processDOMTemplate("temp",data);
document.getElementById("ShowDiv").innerHTML = result;

　语法结构如下：

{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学习测试

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

输出结果如下：

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

jstemplatetemplatetemplate模板引擎

相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图， ：视图模...
js实现横向跑马灯效果
首先我们需要一个html代码的框架如下： 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...