jQuery tmpl用法总结

简介: 原文:jQuery tmpl用法总结 之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.
原文: jQuery tmpl用法总结

之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考:

官方网址:http://web.archive.org/web/20121014080309/http://api.jquery.com/jquery.tmpl/

github网址:https://github.com/jquery/jquery-tmpl        http://jquery.github.com/jquery-tmpl/demos/step-by-step.html


下面重点介绍一下使用方法:

首先介绍一下  模板和数据,不用说这两个肯定是不可缺少的

模板有两种定义方法,下面给出具体code

1.

var markup = "<li>Some content: ${item}.<br/>" 
       + " More content: ${myValue}.</li>";

$.template( "movieTemplate", markup );

2.

<script id="movieTemplate" type="text/x-jquery-tmpl">  
    <li><b>${Name}</b> (${ReleaseYear})</li>  
</script>

这样就定义了两种模板,前一种写到script里边,后边一种写到html里边


数据用json


下面开始渲染模板
$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );
$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
注意:movies是json数据数组

var movies = [  
            { Name: "The Red Violin", ReleaseYear: "1998" },  
            { Name: "Eyes Wide Shut", ReleaseYear: "1999" },  
            { Name: "The Inheritance", ReleaseYear: "1976" }  
        ]; 


下面给出一些更深层次的操作数据的方法
1.判断:

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>${Title}</td>
        <td>
            {{if Languages}}
	    	Alternative languages: <em>${Languages}</em>.
	    {{else Subtitles}}
		Original language only...
		Subtitles in <em>${Subtitles}</em>.
	    {{else}}
		Original version only, without subtitles.
	    {{/if}}
	</td>
    </tr>
</script>


2.遍历(tmpl会遍历普通数据,但是有时候数据是模板数据对象里边还嵌套这数组等等)
var movies = [
    {
	Title: "Meet Joe Black",
	Languages: [
	    { Name: "English" },
	    { Name: "French" }
	]
    }
];

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
	<td>${Title}</td>
	<td>Languages:
	    <em>
		{{each Languages}}
		    ${$value.Name}
		{{/each}}
	    </em>
	</td>
    </tr>
</script>

注意:判断语句里边不要加空格最好不要有空格


3.在应用中有时候想给模板里边填充一部分html代码


<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
	<td>${Title}</td>
	<td class="synopsis">{{html Synopsis}}</td>
    </tr>
</script>


4.应用中有时候也需要对数据进行一下处理


var markup = "<li>Some content: ${$item.myMethod()}.<br/>" 
           + " More content: ${$item.myValue}.</li>";

    $.template( "movieTemplate", markup );

    $.tmpl( "movieTemplate", movies,
      { 
          myValue: "somevalue", 
          myMethod: function() { 
              return "something";
          } 
      } 
    ).appendTo( "#movieList" );


目录
相关文章
|
2月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
48 5
|
9月前
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1244 0
|
27天前
|
JavaScript 前端开发
必知的技术知识:jQuery中queue和dequeue的用法
必知的技术知识:jQuery中queue和dequeue的用法
|
9月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
67 0
|
2月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
40 0
|
存储 JavaScript 前端开发
【前端每日一问002】jquery中each与data方法的用法与概念
【前端每日一问002】jquery中each与data方法的用法与概念
|
JavaScript 算法 前端开发
jQuery第二天,笔记总结(二)
jQuery第二天,笔记总结(二)
106 0
jQuery第二天,笔记总结(二)
|
移动开发 缓存 JavaScript
jQuery第二天,笔记总结(一)
jQuery第二天,笔记总结
93 0
jQuery第二天,笔记总结(一)
|
JavaScript 前端开发
jQuery第一天,笔记总结(二)
jQuery第一天,笔记总结(二)
151 0
jQuery第一天,笔记总结(二)
|
存储 JavaScript 前端开发
jQuery第一天,笔记总结(一)
jQuery第一天,笔记总结
151 0
jQuery第一天,笔记总结(一)