详解射流研究…模板引擎（三分之一秒)

当页面中引用模板。射流研究…文件之后，脚本将创建一个三分之一对象供你使用。

parseDOMTemplate(elementId，optionaldordocument)//获得模板字符串代码

得到页面中身份为elementId的数字正射影像图组件的InnerHTML，将其解析成一个模板，这个返回一个templateObject对象，解析出错时将抛出一个异常。

可选文档一个可选参数，在使用iframe，frameset或者默认多文档时会有用，通常用来做模板的数字正射影像图元素师一个隐藏的文本区。

以上方法的到的模板（字符串)再经过流程()方法进一步解析就得到了最终的源代码。

如：

var result=parsedom模板(元素id，optionalDocument).process()；//用数据替换模板

这个方法也直接能用于解析字符串：

定义变量数据={ Name: '张辽' };//不输入就包ul，输入就包你输入的那个var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；警报('你好${Name} ' .过程（数据));//流程()就是一个将数据解析模板的函数，这里输出你好，张辽一步到位的方法：

三分之一。processdom模板(元素id、上下文对象、选项标签、选项文档)

这是一个辅助函数，内部调用TrimPath.parseDOMTemplate()和流程()方法结果就是经过解析后生成的代码。

其作用相当于parseDOMTemplate().process()，即从文本区域读取模板后替换数据。

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

超文本标记语言标题学习测试/titlescript src='http:/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/head body div id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'${Name}败走麦城！/textarea /body /html脚本语言=' JavaScript ' var数据={ name : '关云长' };var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；/script以上代码在页面上输出：关云长败走麦城！

其实，这个东西与C#，PHP的模板引擎，并没有本质上的区别，都是读入模板，然后替换数据。只不过，C#与服务器端编程语言(专业超文本预处理器的缩写)等后台语言，一般都从文件里面读取模板，如Html，txt等。而三分之一就从文本区域/文本区域标签上读取模板。

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

超文本标记语言标题学习测试/titlescript src='http:/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/head body div id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'{如果名称=='关云长}${Name}龙卷旋风斩！{elseif Name=='郭嘉}${Name}冰河爆裂破！{else}${Name}放大！{/if}/textarea /body /html脚本语言=' JavaScript ' var数据={ name : '郭嘉' };var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；/script循环控制：

htmlheadtitleTrimPath学习测试/titlescript src='http:/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/headdydiv id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'表格宽度='400 '单元格间距='0 '单元格填充='0 '边框=' 1 ' {用于I in data } trtd $ { I . Name }/tdtd $ { I . Big }/TD/tr {/用于}/表格/文本区域/正文/html脚本类型=' text/JavaScript ' var data=[{ Name : '关羽，Big: '龙卷旋风斩}，{ Name: '郭嘉，Big: '冰河爆裂破}，{ Name: '诸葛，Big: '卧龙光线', },];//他妈的为循环多了一次var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；/script语法结构如下：

{对于列表表达式中的Varname }主循环体{ forelse }当输入为null，或列表表达式数量为0时{/for}

宏定义：

htmlheadtitleTrimPath学习测试/titlescript src='http:/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/headdydiv id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'{宏htmlList(list，optionallistTYPe)} { var list type=optionallistTYPe！=null？optionalListType : ' ul ' } $ { list type } { for list中的项目} Li $ { item }/Li {/for }/$ { list type } {/macro } $ { html list([' AA '，' BB '，' CC '，')}/text area/body/html script type=' text/JavaScript ' var data={ }；//不输入就包ul，输入就包你输入的那个var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；/脚本CDATA区域：

htmlheadtitleTrimPath学习测试/titlescript src='http:/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/headdydiv id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'{cdata}${Name}{/cdata}被解释成了$ { Name }/文本区域/正文/html脚本类型=' text/JavaScript ' var数据={ Name : '张辽' };//不输入就包ul，输入就包你输入的那个var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；/script内联js:

htmlheadtitleTrimPath学习测试/titlescript src='http:/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/headdydiv id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'选择onchange='sel_onchange()'选项值='1'1/optionoption值=' 2 ' 2/option/select { eval } sel _ onchange=function(){ alert('我不小心被变化了');//此射流研究…事件会被触发，并且此处的注释没影响} {/eval }/文本区域/正文/html脚本类型=' text/JavaScript ' var data={ name : '张辽' };//不输入就包ul，输入就包你输入的那个var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；/script结合。净手动音量调节后台程序再来一把：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。手动音量调节命名空间测试jQuery_EasyUI .控制器{ [HandleError]公共类家庭控制器：控制器{公共操作结果索引(){返回视图()；}公共行动结果GetJson(){ Person P1=new Person(1，)刘备', 30);人员p2=新人员(2 '关羽', 28);人员p3=新人员(3 '张飞', 36);侦听器侦听器=新侦听器()；听众.添加(P1)；听众.add(p2)；听众.添加(P3)；返回Json(监听器，JsonRequestBehavior .允许get)；} }公共类人{公共人(int id，字符串名称，int age){ Id=Id；名称=名称年龄=年龄；} public int Id { get设置；}公共字符串名称{获取设置；} public int Age { get设置；} }} 前台代码：

"%@"页面语言="c# "继承="系统"。网络。Mvc。查看页面“% html标题三分之一学习测试/title脚本src='http:/./Scripts/jquery。量滴js ' type=' text/JavaScript '/script script src=' http :/./Scripts/trimpath/template。js ' type=' text/JavaScript '/script/head body div id=' ShowDiv '/div textarea id=' temp ' style=' display : none；'表格宽度='400 '单元格间距='0 '单元格填充='0 '边框='1' tr tdId/td姓名运输署/运输署年龄/TD/tr { for I in data } tr TD $ { I . Id }/TD TD $ { I . Name }/TD TD $ { I . Age }/TD/tr {/for }/table/text area/body/html脚本类型=' text/JavaScript ' var data；$(function() { $).ajax({ url: '/Home/GetJson '，type: 'post '，async: true，dataType: 'json '，success:函数(响应){数据=响应；var结果=三分之一。processdomtapel(' temp '，数据);文件。getelementbyid(' ShowDiv ').innerHTML=结果；} })})/脚本输出结果如下：

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