0

0

用模版生成HTML的框架jquery.tmpl使用详解

高洛峰

高洛峰

发布时间:2016-12-19 09:23:52

|

1824人浏览过

|

来源于php中文网

原创

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

因此一些用模版生成HTML的的框架相继出现jquery.tmpl 就是其中的一种,下面我们来详细介绍下jquery.tmpl的用法

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

立即学习前端免费学习笔记(深入)”;

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

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

var markup = "
  • Some content: ${item}.
    " + " More content: ${myValue}.
  • "; $.template( "movieTemplate", markup );

    这样就定义了两种模板,前一种写到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" } 
    ];

    jquery.tmpl的几种常用标签分别有:

    ${}, {{each}}, {{if}}, {{else}}, {{html}}

    不常用标签

     {{=}},{{tmpl}} and {{wrap}}.

    ${}等同与{{=}}是输出变量 ${}里面还可以放表达式 (=和变量之间一定要有空格,否则无效)

    示例:

    php商城系统
    php商城系统

    PHP商城系统是国内功能优秀的网上商城系统,同时也是一个商业的PHP开发框架,有多套免费模版,强大的后台管理功能,专业的网上商城系统解决方案,快速建设网上购物商城、数码商城、手机商城、办公用品商城等网站。 php商城系统v3.0 rc6升级 1、主要修复用户使用中出现的js未加载完报错问题,后台整改、以及后台栏目的全新部署、更利于用户体验。 2、扩展出,更多系统内部的功能,以便用户能够迅速找到需

    下载

    {{each}} 提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)

    示例:

    {{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if

    示例:

    {{html}} 输出变量html,但是没有html编码,适合输出html代码

     实例

    {{tmpl}} 嵌套模版

    实例

    {{wrap}},包装器

    实例

    $data $item $item代表当前的模板;$data代表当前的数据。

     实例:

     $.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item

    实例

    更多用模版生成HTML的框架jquery.tmpl使用详解相关文章请关注PHP中文网!

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    c++主流开发框架汇总
    c++主流开发框架汇总

    本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

    79

    2026.01.09

    c++框架学习教程汇总
    c++框架学习教程汇总

    本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

    46

    2026.01.09

    学python好用的网站推荐
    学python好用的网站推荐

    本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

    121

    2026.01.09

    学python网站汇总
    学python网站汇总

    本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

    12

    2026.01.09

    python学习网站
    python学习网站

    本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

    15

    2026.01.09

    俄罗斯手机浏览器地址汇总
    俄罗斯手机浏览器地址汇总

    汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

    71

    2026.01.09

    漫蛙稳定版地址大全
    漫蛙稳定版地址大全

    漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

    370

    2026.01.09

    php学习网站大全
    php学习网站大全

    精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

    45

    2026.01.09

    php网站搭建教程大全
    php网站搭建教程大全

    本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

    12

    2026.01.09

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    ASP 教程
    ASP 教程

    共34课时 | 3.4万人学习

    麻省理工大佬Python课程
    麻省理工大佬Python课程

    共34课时 | 5.1万人学习

    国外Web开发全栈课程全集
    国外Web开发全栈课程全集

    共12课时 | 1.0万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号