jquery 中的tmpl类似于asp.net中的datalist控件。

首选,在页面代码中加入两行,jquery的js文件引用

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

然后再建一个html模版

<script id="moiveTemplate" type="text/x-jquery-templ">

<li><b>${Name}</b>(${ReleaseYear})</li>

</script>

<script >

var moives=[{Name:"The Red Violin",ReleaseYear:"1998"},{Name:"Eyes Wide Shut",ReleaseYear:"1999"},{Name:"The Inheritance",ReleaseYear:"1976"}];//获得json格式的数据

$("#moiveTemplate").templ(moives).appendTo("#moiveList");

</script>

<ul id="moiveList">

</ul>

效果显示为:

  • The Red Violin (1998)
  • Eyes Wide Shut (1999)
  • The Inheritance (1976)

Jquery的tmpl的更多相关文章

  1. jQuery tmpl用法总结

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

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  3. Jquery.tmpl

     它是一个基于jquery的模板展示插件,有了它就可以去展示JSON数据渲染到HTML页中!一.使用方法引入Jquery引入 tmpl<script src="../Scripts/j ...

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

    昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里.官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options ...

  5. jquery.tmpl的使用

    jquery.tmpl是jQuery模板插件,http://plugins.jquery.com/tmpl/ (另外还有一个插件dot.js,不依赖与jquery,性能更佳,使用方法大同小异) 在网页 ...

  6. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  7. jquery template模版引擎

    jTemplates http://jtemplates.tpython.com/ jquery-template  https://github.com/codepb/jquery-template ...

  8. jQuery-template.js学习

    花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.e ...

  9. JavaScript 平时记录

    1,JS中的this 见下面例子,注意函数中的函数 中的this指的是window对象了!!! document.addEventListener('click', function (e) { co ...

随机推荐

  1. Enum类型 枚举内部值/名

    enum Days { Nothing=0, Mon=1, Stu=2 } static void Main(string[] args) { foreach (int item in Enum.Ge ...

  2. jquery------.resizable()的使用

    index.jsp //加上这两行代码,右下角会有样式效果<link rel="stylesheet" href="//code.jquery.com/ui/1.1 ...

  3. 初学structs2,结果类型简单示例

    一.自定义结果处理类,structs.xml中package节点下加result-types节点,在result-types节点下配置result-type的属性.然后在配置的action中的resu ...

  4. C# 汉字转拼音

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Comm ...

  5. MySQL数据库InnoDB引擎下服务器断电数据恢复

    说明: 线上的一台MySQL数据库服务器突然断电,造成系统故障无法启动,重新安装系统后,找到之前的MySQL数据库文件夹. 问题: 通过复制文件的方式对之前的MySQL数据库进行恢复,发现在程序调用时 ...

  6. [BZOJ1101][POI2007]Zap

    [BZOJ1101][POI2007]Zap 试题描述 FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd ...

  7. BZOJ 1002 [ FJOI 2007 ]

    -------------------------萌萌哒分割线------------------------- 题目很容易看懂,数据范围也不大.当然可以卡过暴力的人了. 在n=1时很明显是一种,如下 ...

  8. 【SpringMVC】SpringMVC系列9之Model数据返回到View

    9.Model数据返回到View 9.1.概述     Spring MVC 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView 时, 方法体 ...

  9. mysql show

    1.show命令语法 SHOW {BINARY | MASTER} LOGS SHOW BINLOG EVENTS [IN 'log_name'] [FROM pos] [LIMIT [offset, ...

  10. Javascript配合jQuery实现流畅的前端验证

    做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...