当页面中引用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)

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?