jQuery tmpl用法总结
2016-05-06 23:40
525 查看
原文: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.
2.
这样就定义了两种模板,前一种写到script里边,后边一种写到html里边
数据用json
下面开始渲染模板
$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );
$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
注意:movies是json数据数组
下面给出一些更深层次的操作数据的方法
1.判断:
2.遍历(tmpl会遍历普通数据,但是有时候数据是模板数据对象里边还嵌套这数组等等)
注意:判断语句里边不要加空格最好不要有空格
3.在应用中有时候想给模板里边填充一部分html代码
4.应用中有时候也需要对数据进行一下处理
之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下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" );
相关文章推荐
- [置顶] jQuery判断checkbox,radio是否选中
- jQuery过滤选择器
- jQuery常规选择器
- jquery 插件之鼠标悬停图片切换效果(附详细注释)
- 8、关于Jquery的Ajax的项目代码
- 7、jQuery的Ajax与Java交互带加载图片
- JQUERY的父,子,兄弟节点查找方法
- 6、jQuery的Ajax与Java通过POST方式交互
- 5、jQuery的Ajax与Java通过GET方式交互
- JQuery-UI中的datepicker的使用
- jquery操作记录
- jQuery确定删除提示框
- jQuery Validation Engine 表单验证
- 多版本jquery冲突解决
- Jquery之实现上下移动和排序
- jquery实现跳转到页面指定位置
- jquery提示信息 tips
- Jquery获得控件值的三种方法总结
- 【Yii2】Yii2执行完composer install 出现 vendor/bower/jquery/dist 找不到的解决方案
- jQuery:多个AJAX/JSON请求对应单个回调并行加载