jQuery插件-微软jQuery Templates

开发 前端
我们知道微软早已开始全面支持jQuery,并在MVC项目中默认添加了jQuery,这对我们广大Asp.net开发者带来了福音。目前,微软已经为jQuery开发了三款jQuery插件,分别为jQuery Glob、jQuery Templates和jQuery Data Linking。

我们知道微软早已开始全面支持jQuery,并在MVC项目中默认添加了jQuery,这对我们广大Asp.net开发者带来了福音。目前,微软已经为jQuery开发了三款jQuery插件,分别为jQuery Glob、jQuery Templates和jQuery Data Linking。由于考虑到国内开发者很少使用***者,我就不进行介绍了,有兴趣的可以Google一下。本篇先看下jQuery Templates:

jQuery Templates使开发者能方便的将javascript对象绑定到html中,而不需要我们一个文本框一个文本框机械的来绑定数据。jQuery Templates支持简单的语法,使我们能够得到想要的html结果,使用jQuery Templates方法如下:

首先,我们需要引用jQuery文件和jQuery.tmpl文件,如下:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
  2. <script src="jquery.tmpl.js" type="text/javascript"></script> 

使用jQuery Templates我们应将要显示的内容嵌入到<script type="text/html">标记中,我们以非常简单的一个例子来看看jQuery Templates的使用方法:

  1. <div id="userinfo"></div> 
  2. <script id="usertemplate" type="text/html"> 
  3. <div class="userinfo"> 
  4.     UserName:{{= name}} 
  5.     Website:{{= website}} 
  6. </div> 
  7. </script> 

我们使用Template可以显示javascript对象或者javascript对象数组,下边是我们将要用来显示的javascript对象数组和jQuery方法:

  1. var users = [ 
  2.     { name: "朋友的你", website: "http://www.jquery001.com" }, 
  3.     { name: "jQuery学习", website: "http://www.jquery001.com" } 
  4. ]; 
  5. $(document).ready(function () { 
  6.     $("#usertemplate") 
  7.     .render(users) 
  8.     .appendTo("#userinfo"); 
  9. }); 

render()方法将数据转换为串,***将数据追加到userinfo元素,页面加载后执行结果如下图所示:

jQuery Templates运行结果1

前边说过,jQuery Templates中可以使用简单的语法,这样我们可以根据需要来显示数据。比如在本例中,比如某人有多个网站,下边我们看看简单的if和each方法。javascript对象数组如下:

  1. var users = [ 
  2.     { name: "朋友的你", websites: ["jquery001.com", "google.com"] }, 
  3.     { name: "jQuery学习", websites: ["jquery001.com"] }, 
  4.     { name: "jQuery", websites: [] } 
  5. ]; 

下边显示了使用Template中的if、each方法,也没有过多可说的,我们使用者使用一两次也就记下了它的语法:

  1. <div id="userinfo"></div> 
  2. <script id="usertemplate" type="text/html"> 
  3. <div class="userinfo"> 
  4.     UserName:{{= name}} 
  5.     {{if websites.length}} 
  6.     Websites: 
  7.     <ul> 
  8.         {{each(i,website) websites}} 
  9.         <li>{{= website}}</li> 
  10.         {{/each}} 
  11.     </ul> 
  12.     {{/if}} 
  13. </div> 
  14. </script> 

下图显示了***的结果,可能您已经预料到了。当然了本篇只是非常简单的介绍了下jQuery Templates的基本使用方法,希望对读者有所帮助。

jQuery Templates运行结果2

原文链接:http://www.jquery001.com/jquery-templates.html

责任编辑:陈四芳 来源: jquery001.com
相关推荐

2013-12-02 15:31:37

jQuery插件

2013-12-02 15:43:05

jQuery插件

2013-10-09 10:00:35

JQueryJQuery插件

2013-12-02 15:10:56

jQuery插件

2013-12-02 15:21:30

jQuery插件

2013-12-02 14:53:20

jQuery插件

2013-12-02 15:25:38

jQuery插件

2013-01-09 10:20:26

jQueryFlotjQuery插件

2011-08-25 09:30:22

2012-05-22 01:45:58

JavaScriptCSSXML

2012-06-15 11:32:19

ibmdw

2010-06-28 09:06:44

jQueryjQuery国际化插件

2011-08-29 14:50:08

jQuery插件

2012-05-10 13:45:45

jQuery

2012-12-18 09:49:57

jQueryJavaScriptJS

2012-04-16 09:19:03

jQuery插件

2013-03-20 13:21:51

jQueryjQuery插件

2012-04-27 10:00:43

jQuery插件

2009-06-24 10:58:21

jQuery插件教程

2012-04-25 09:43:43

jQuery插件
点赞
收藏

51CTO技术栈公众号