`

tmpl

    博客分类:
  • ajax
 
阅读更多


 00、语法

${}:等同于{{= }}//jsp中建议{{= }},注意空格。
    {{html }}:若变量中带有html标签是有次tag
    {{if  }} {{else}}:判断结构
    {{each }}:循环结构
tmpl模板(创建)
    方法1、
        var templateStr="<span>"+
                            "<a href=''>{{= LinkText}}</a>"+
                        "</span>";
        $.template("template",templateStr);
        $.tmpl('template',list).appendTo(".realContent"); //有引号
    方法2、
        <script id="template" type="text/x-jquery-tmpl" >
            <span>
                <a href="">{{= linkText}}</a>
            </span>
        </script>
     $.tmpl(template,list).appendTo(".realContent");//无引号

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

00、tmpl追加属性(循环index)
     $.tmpl( qustionTemplate,list,
                {getIndex:function(){
                                      index=index+1;
                                      return index;
                                    }
                }           
              ).appendTo(".realContent");
     调用:<a href="javascript:void(0);" id="{{html $item.getIndex()}}">我要测试</a>   

00、例子1

 

function ajaxLoadQuestionType(params,url)
{
	$.post(url,params,function(data){
		$("#span_qt a:eq(0)").siblings("a").remove();
		data = data.replace(/\s/ig, ' ');
	    data=eval('('+data+')');
       var qtTmplStr='<a name="{{= ID}}" href="javascript:void(0);">
                          {{= QTYPE_NAME}}
                       </a>';
	    $.template("qtTmpl",qtTmplStr);
		$.tmpl("qtTmpl",data).appendTo("#span_qt");
	});
}

  

 

 

例子2

 

<!-- 试题列表模板 -->
<script id="qustionTemplate" type="text/x-jquery-tmpl">
    <div  id="{{= myStore.id}}" style="{{html $item.getBorder()}}">
        <h3>题型{{if questionType!=null}} {{= questionType.QTYPE_NAME}} {{/if}}
	    年级:{{if grade!=null}} {{= grade.GRADE_NAME}} {{/if}} 
	    学科:{{if subject!=null}} {{= subject.sbj_name}} {{/if}}
	    知识点:{{= knowledge_content}}</strong> 
	    难度:{{if dictinfo!=null}} {{= dictinfo.info}} {{/if}}
	    使用次数:<strong>{{= quote_num}}
	</h3>
	<ul class="daan_con">{{html qcontent}}</ul>
	{{if answerCount>0}} 
              <p>{{html answer}}</p>
               <h5>答案解析</h5>
                <p>{{html answer_analysis}}</p>
         {{/if}}
          <div class="result dd" style="float:right;"> 
             {{if answerCount>0}}   
                 <a id="{{html $item.getIndex()}}" onclick="popLayerTest(this)" >重做</a> 
              {{/if}}
            </div>      
</script>
$.tmpl( qustionTemplate,data.items,
        {    getIndex:function(){
		  index=index+1;
		  return index;
	      },
	      getBorder:function(){
		  i=i+1;
		  if(i==1){
		      return "margin:0; border:0;";
		  }
		  return "";
	      }
        }    		
       ).appendTo(".realContent");

 

 


 
 

 

 

  • 大小: 8.4 KB
  • 大小: 5.2 KB
分享到:
评论

相关推荐

    jquery.tmpl.js

    《jQuery tmpl.js 模板引擎详解及应用》 在Web开发中,模板引擎是一种非常重要的工具,它允许开发者将数据和HTML结构分离,提高代码的可读性和复用性。jQuery tmpl.js是jQuery的一个插件,它提供了一种简单而强大的...

    最简单的jquery-tmpl渲染Demo

    ### jQuery tmpl简介 jQuery tmpl是jQuery生态系统中的一个插件,它提供了一种简洁的方式来动态渲染HTML模板,通过将数据与HTML结构结合,可以创建出富有表现力的用户界面。它的语法简洁明了,使得开发者能够快速地...

    sublime text3 SublimeTmpl

    **Sublime Text 3与SublimeTmpl插件详解** Sublime Text 3是一款广受开发者喜爱的轻量级、跨平台的代码编辑器。它以其丰富的特性、高效的性能和高度可定制性赢得了程序员的青睐。然而,在日常开发中,为了提高效率...

    微软的 jquery.tmpl.min.js,浏览器兼容性最强

    《jQuery tmpl.min.js:浏览器兼容性之王》 在网页开发中,JavaScript库jQuery一直以其易用性和广泛的浏览器兼容性而备受青睐。然而,仅靠jQuery本身并不能满足所有复杂的动态数据展示需求,这就是jQuery插件jQuery...

    locale-archive 和 locale-archive.tmpl

    在Linux操作系统中,`locale-archive`和`locale-archive.tmpl`是两个非常关键的文件,它们与系统的国际化(Internationalization,简称i18n)和本地化(Localization,简称l10n)设置密切相关。`locale`是系统用来...

    jquery-tmpl-master.zip

    《jQuery-Tmpl:深入解析与应用》 在前端开发领域,jQuery库的广泛使用使得JavaScript操作DOM变得简单易行。然而,随着Web应用复杂性的提升,对于数据绑定和模板渲染的需求日益增强,jQuery-Tmpl应运而生。本文将...

    jquery.tmpl.js下载(接收JSON类型数据循环)

    jquery.tmpl.js jquery.tmpl.js jquery.tmpl.js

    前端开源库-ape-tmpl

    【ape-tmpl】是一款专为前端开发者设计的开源库,它是APE框架的一部分,主要用于处理和渲染模板。在前端开发中,模板引擎是一个重要的工具,它能够帮助开发者将数据和视图逻辑分离,使得代码更加清晰,更易于维护。...

    jQuery .tmpl(), .template()大全集

    而`.tmpl()`和`.template()`是jQuery UI中的两个重要功能,用于模板引擎,帮助开发者构建动态数据驱动的用户界面。这篇综合指南将深入探讨这两个方法的用法和原理,以帮助你更好地理解和应用它们。 首先,我们来...

    jquery.tmpl.js使用例子

    《jQuery tmpl.js 使用详解与实例解析》 在Web开发中,模板引擎是处理动态数据与HTML结合的关键工具,jQuery tmpl.js就是这样一款轻量级、高效的模板插件,它允许开发者将数据逻辑与页面展示分离,使得代码更加清晰...

    TMPL_Vue:vue

    TMPL_Vue一.Vue基础概述:JS框架,简化Dom操作,响应式数据驱动引进&lt;!-- 开发环境版本,包含了有帮助的命令行警告 --&gt; [removed][removed] &lt;!-- 生产环境版本,优化了尺寸和速度 --&gt; [removed][removed]...

    wu.tmpl.js, 高性能模板引擎 (js template).zip

    ** Wu_TMPL.js:高性能JavaScript模板引擎概述** `Wu.tmpl.js` 是一款高性能的JavaScript模板引擎,专为Web开发设计,旨在提高前端数据渲染的效率和灵活性。这款开源库允许开发者通过简单的模板语法来生成动态HTML...

    jquery-tmpl

    《jQuery tmpl:强大的模板引擎与Ajax的完美结合》 在Web开发中,数据与视图的绑定是一项核心任务,jQuery tmpl作为一个轻量级的模板引擎,为开发者提供了高效且便捷的方式来处理这一问题。jQuery tmpl的强大之处...

    tmpl 模板插件

    jQuery本身是一个强大的JavaScript库,提供了一系列方便的DOM操作、事件处理、动画效果等功能,而tmpl则是其在模板渲染领域的扩展。通过使用tmpl,开发者可以创建模板字符串,这些字符串包含占位符,这些占位符将在...

    前端开源库-blueimp-tmpl

    前端开源库-blueimp-tmplblueimp tmpl,1KB轻量级,快速和强大的javascript模板引擎,零依赖性。与node.js等服务器端环境、requirejs、browserify或webpack等模块加载程序以及所有Web浏览器兼容。

    jquery-tmpl-master.zip新版

    添加的版本:1.4.3 jQuery.tmpl(template [,data] [,options]) template用作模板的HTML标记或文本。 数据的数据呈现。这可以是任何JavaScript类型,包括Array或Object。 options用户定义的键/值对的可...

    jQuery .tmpl(), .template()学习资料小结

    ### jQuery .tmpl(), .template()知识点小结 #### jQuery.tmpl()插件介绍 jQuery.tmpl()是一个有趣的jQuery插件,它允许开发者将特定的HTML模板和数据结合,进行动态内容渲染。该插件的文档和说明可以在官方提供的...

Global site tag (gtag.js) - Google Analytics