`

微软template.js

 
阅读更多

001、语法

    ${}:等同于{{= }}//jsp中建议{{= }},注意空格。
    {{html }}:若变量中带有html标签是有次tag
    {{if  }} {{else}}:判断结构
    {{each }}:循环结构

002、引入js

<script type="text/javascript" src="js/jq/jquery.tmpl.js"></script>

 003、使用

    方法1、简单结构使用此方法

 

<script type="text/javascript">
    var templateStr="<span>"+
                                      "<a href=''>{{= LinkText}}</a>"+
		                "</span>";
    $.template("template",templateStr);
    $("#template").tmpl(data).appendTo("#targetDom");
</script>

    方法2、复杂结构使用此方法

<script id="template" type="text/x-jquery-tmpl" >
	<span>
	        <a href="">{{= linkText}}</a>
	</span>
</script>
<script type="text/javascript">
       $.tmpl("#template",data).appendTo("targetDom");
       //或者
       $.tmpl(template,data).appendTo("targetDom");
</script>

004、模板取值

   1、 (当user.garade==null 时 user.grade.gradeName致使模板出错)
        {{if user.garade!=null}} {{= user.grade.gradeName}} {{/if}}
    2、html内容输出(answer=“ <a href="" >answer</a>”)
      {{html answer}}

 

005、实例

<!-- 试题列表模板 -->
<script id="qustionTemplate" type="text/x-jquery-tmpl">
           	 <div class="daan1" style="margin:0">
                    <h3>	题型:<strong>{{if questionType!=null}} {{= questionType.QTYPE_NAME}} {{/if}}	 </strong> 
							年级:<strong>{{if grade!=null}} {{= grade.GRADE_NAME}} {{/if}} </strong> 
							学科:<strong>{{if subject!=null}} {{= subject.sbj_name}} {{/if}}	 </strong> 
							知识点:<strong>{{= knowledge_content}}</strong> 
							难度:<strong>{{if dictinfo!=null}} {{= dictinfo.info}} {{/if}} </strong> 使用次数:<strong>{{= quote_num}}</strong>
					</h3>
					<ul class="daan_con">{{html qcontent}}</ul>
				<!--{{if answerCount==0}}--> 
            		<div class="result"> 
              	       <!--正确答案-->
              		   <div class="detail">
              			  <h5>正确答案</h5>
              			  <p>{{html answer}}</p>
                    	  <h5>答案解析</h5>
                    	  <p>{{html answer_analysis}}</p>
             		  </div>
              	     <!--正确答案结束--> 
           		</div>
           <!--	{{/if}}--> 
            <!--end result--> 
           </div>
          <!--end daan-->
          <div class="result dd" style="float:right;">
           	  <a id="2" name="{{= id }}" rel="5" onclick="popLayerTest(this)" href="javascript:void(0);" class="btn_tk01">重做</a>
           	  <a href="javascript:void(0);"  onclick="seleteAnwserHistory(this,'{{= id }}')" onmouseout="imgOut(this)" class="btn_tk02">答题记录</a>
           	  
         	  <div class="pop_ms2">
                 <table width="270px" border="1"></table>
         	  </div> 
		     <a href='javascript:void(0);' class="btn_tk03" onclick='javascript:if(confirm("你确认要删除吗?"))location="*******.action?my_questionid={{= myQuestions.id}}"'>从错题本中删除</a> </div>
                   <div class="clearfix"></div>
	    </div>
        
</script>

 006、为模板扩展属性值(例:显示每行的index)

//异步加载试题列表
//模板将追加的属性或方法赋给内置变量 $item
function ajaxLoadQuestion()
{
	   var index=0;
	    $.tmpl( qustionTemplate,data,
	    	        {   getIndex:function(){
						 index=index+1;
						   return index;
					        }
			 } ,
                         { }
	    	  ).appendTo(".realContent");
		//重新绑定事件
		initPage();
}

 调用追加变量 <td> {{html $item.getIndex()}}</td>  此方法每调用一次index 就+1

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    Node.js-基于TypescriptExpress的web开发工程模板

    TypeScript是微软开发的一种静态类型超集语言,它在JavaScript的基础上添加了强类型、类和接口等特性,提高了代码的可维护性和可读性。TypeScript编译后生成的JavaScript代码可以运行在任何支持JavaScript的环境中,...

    Complementary_Code_edge_互补代码模式样本微软云平台技能代码编程云_

    这种模式通常用于大型分布式系统,特别是在云平台上,如微软的Azure云服务。在微软云平台上,这种模式可以帮助开发人员构建可扩展、高可用且易于维护的应用程序。 描述中的“微软云平台技能代码编程云”表明这是一...

    微软常用运行库合集 2020.09.15.rar

    5. **Microsoft JScript and Microsoft ActiveX Data Objects (ADO)**:对于使用JavaScript或VBScript以及与数据库交互的应用,这些组件是必需的。ADO允许应用程序访问各种数据源,如SQL Server或Excel。 6. **...

    JavaScript(ES6新增、W3C、MDN)最新参考手册.zip

    2. **微软JavaScript手册js.chm** - 微软的JavaScript手册可能会从微软的视角深入解析JavaScript,尤其是与Internet Explorer或Edge浏览器相关的兼容性问题和优化技巧。它可能涵盖了基本语法、BOM(浏览器对象模型)...

    微软常用运行库合集2021年8月2日.rar

    这些运行库包含了C++标准库、MFC(Microsoft Foundation Classes)、ATL(Active Template Library)等模块,是很多大型软件运行的基础。 2. **Microsoft .NET Framework**:这是一个由微软开发的全面的开发平台,...

    WLW文本模板插件TextTemplate

    Windows Live Writer(简称WLW)是一款由微软开发的离线博客编辑器,它允许用户在本地环境中撰写博客文章,然后发布到支持的各种博客平台。对于经常需要写相同或类似内容的博主来说,WLW的效率提升工具——Text...

    AngularJS-SPA-Template-master.zip_Angularjs-master_angularjs_asp

    AngularJS是Google维护的一个JavaScript框架,主要用于构建前端动态网页应用,而ASP.NET MVC则是微软提供的一个后端开发框架,用于构建可伸缩的、高性能的Web应用程序。 **AngularJS** AngularJS是MVC(模型-视图-...

    【JavaScript源代码】JS代码编译器Monaco使用方法.docx

    JavaScript源代码的编辑和调试是开发过程中的重要环节,Monaco Editor是一款强大的代码编辑器,由微软开发并用于Visual Studio Code。它提供了丰富的特性,如语法高亮、代码提示、自动换行和代码折叠,满足开发者...

    asp基础知识.docx

    ASP,全称为Active Server Pages,是一种由微软推出的服务器端脚本环境,用于创建动态交互式网页。它允许开发者将HTML、脚本语言(如VBScript或JavaScript)和ActiveX控件结合在一起,生成能够处理用户请求并返回...

    Asp template v1.0 -ASP源码.zip

    ASP(Active Server Pages)是一种由微软开发的服务器端脚本环境,用于生成动态网页或Web应用程序。Asp template v1.0 是一个基于ASP技术的网站模板,它可以帮助开发者快速搭建一个基本的Web站点,无需从零开始编写...

    ASP入门教程

    ASP(Active Server Pages)是一种由微软开发的服务器端脚本环境,用于创建动态网页和Web应用程序。它允许开发者结合HTML、脚本语言(如VBScript或JavaScript)以及ActiveX控件来构建功能丰富的Web应用。ASP的核心...

    前端项目-docxtemplater.zip

    “docxtemplater”是一个JavaScript库,它允许开发者通过模板和数据来生成微软Word(.docx)文档。这个工具特别适用于需要动态生成报告、合同或其他基于文本的文件的项目。使用.docx格式的好处在于,这些文档可以被...

    VisualC实践与提高数据库篇 附带光盘源码

    《Visual C++实践与提高数据库篇》是一本深入探讨如何使用Microsoft的Visual C++编程环境进行数据库开发的书籍。作者刘刀桂和孟繁晶在书中详细阐述了Visual C++与数据库交互的各种技术和策略,旨在帮助读者提升在...

    水缘泡泡Flash相册源码(asp)v1.0

    3. `AC_RunActiveContent.js`:这可能是一个用来检测和运行ActiveX或Flash内容的JavaScript库。 4. `Organic Template.swf`:这是Flash相册的主体部分,包含了动画效果和展示照片的逻辑。 5. `jb51.net.txt`、`脚本...

    微软COM组件技术教程-共12章源代码.zip

    - **ATL (Active Template Library)**: 微软提供的C++模板库,简化COM组件的开发。 - **MFC (Microsoft Foundation Classes)**: 基于C++的类库,提供对COM的封装,简化面向对象编程。 11. **COM与.NET Framework...

    COM 技术内幕—微软组件对象模型

    10. **ATL(Active Template Library)与MFC(Microsoft Foundation Classes)**:ATL是微软提供的C++模板库,简化了COM组件的开发。MFC则是C++的类库,封装了Windows API,两者都支持COM编程。 以上是COM技术内幕...

    ts-npm-template:使用TypeScript快速启动节点模块

    1. **TypeScript**: TypeScript是一种由微软开发的开源编程语言,它扩展了JavaScript,加入了静态类型系统、接口、类、泛型等特性,提高了代码的可读性和可维护性。使用TypeScript编写Node.js模块能提前发现类型错误...

    【JavaScript源代码】如何用nodejs给C#写一个数据表的实体类生成工具.docx

    在本文中,我们将探讨如何使用Node.js为C#构建一个数据表实体类生成工具,以替代微软提供的T4模板。这个工具将利用Entity Framework Core(EF Core)进行数据库操作,并采用ejs模板引擎来生成C#代码。 首先,我们...

    npm-ts-template

    TypeScript是由微软开发的开源语言,它是JavaScript的一个超集,意味着任何有效的JavaScript代码也是有效的TypeScript代码。TypeScript引入了类型系统,接口,枚举,类,模块等概念,这些都增强了代码的可读性和可...

    微软常用运行库合集 v2021.04.07(32&64位).zip

    其运行库包含了大量的动态链接库(DLL),如msvcr90.dll、msvcp120.dll等,这些文件提供了C++标准库、MFC(Microsoft Foundation Classes)、ATL(Active Template Library)等功能。不同的版本对应不同的Visual ...

Global site tag (gtag.js) - Google Analytics