jQuery插件jQuery Templates怎么用
本篇文章给大家分享的是有关jQuery插件jQuery Templates怎么用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
我们知道微软早已开始全面支持jQuery,并在MVC项目中默认添加了jQuery,这对我们广大Asp.net开发者带来了福音。目前,微软已经为jQuery开发了三款jQuery插件,分别为jQuery Glob、jQuery Templates和jQuery Data Linking。由于考虑到国内开发者有很少使用者,我就不进行介绍了,先看下jQuery。 Templates:
jQuery Templates使开发者能方便的将javascript对象绑定到html中,而不需要我们一个文本框一个文本框机械的来绑定数据。jQuery Templates支持简单的语法,使我们能够得到想要的html结果,使用jQuery Templates方法如下:
首先,我们需要引用jQuery文件和jQuery.tmpl文件,如下:
<script type="text/javascript" class="lazy" data-src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script class="lazy" data-src="jquery.tmpl.js" type="text/javascript"></script>
使用jQuery Templates我们应将要显示的内容嵌入到<script type="text/html">标记中,我们以非常简单的一个例子来看看jQuery Templates的使用方法:
<div id="userinfo"></div> <script id="usertemplate" type="text/html"> <div class="userinfo"> UserName:{{= name}} Website:{{= website}} </div> </script>
我们使用Template可以显示javascript对象或者javascript对象数组,下边是我们将要用来显示的javascript对象数组和jQuery方法:
var users = [ { name: "朋友的你", website: "http://www.jquery001.com" }, { name: "jQuery学习", website: "http://www.jquery001.com" } ]; $(document).ready(function () { $("#usertemplate") .render(users) .appendTo("#userinfo"); });
render()方法将数据转换为串,***将数据追加到userinfo元素,页面加载后执行结果如下图所示:
前边说过,jQuery Templates中可以使用简单的语法,这样我们可以根据需要来显示数据。比如在本例中,比如某人有多个网站,下边我们看看简单的if和each方法。javascript对象数组如下:
var users = [ { name: "朋友的你", websites: ["jquery001.com", "google.com"] }, { name: "jQuery学习", websites: ["jquery001.com"] }, { name: "jQuery", websites: [] } ];
下边显示了使用Template中的if、each方法,也没有过多可说的,我们使用者使用一两次也就记下了它的语法:
<div id="userinfo"></div> <script id="usertemplate" type="text/html"> <div class="userinfo"> UserName:{{= name}} {{if websites.length}} Websites: <ul> {{each(i,website) websites}} <li>{{= website}}</li> {{/each}} </ul> {{/if}} </div> </script>
下图显示了***的结果,可能您已经预料到了。当然了本篇只是非常简单的介绍了下jQuery Templates的基本使用方法,希望对读者有所帮助。
以上就是jQuery插件jQuery Templates怎么用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341