template.js插件和ajax一起使用的例子
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。
https://github.com/yanhaijing/template.js (template源码的GitHub地址) ,下面来介绍template的模板:
1. 编写模版
使用一个type="text/html"的script标签存放模板,或者放到字符串中:
<script id="tpl" type="text/html">
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
</script>
2. 渲染模板
var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});
3. 在网页输出的结果:
- yan
- haijing
//未完成,待续-------
在单页面应用,我们对页面的无刷新有了更高的要求,HTML不再由后端生成,后端只提供一个REST API,返回JSON数据,模版引擎可以大大方便我们渲染一个视图。而不是吃力的使用 jQeury 去拼接一个DOM。
在现在比较常见的 JS MVC Framework : backbone, emberjs, angularjs 中,模板是非常重要的一个组件。
在现在比较常见的 JS MVC Framework : backbone, emberjs, angularjs 中,模板是非常重要的一个组件。
模板是对”如何渲染一个对象“这个逻辑的一种表述方式,并且是一个简便自然的表述方式。所以凡需要渲染一个对象的地方,都会出现模板机制。现在js里面渲染对象变得常见,比如楼主提到的ajax和楼上提到的各种浏览器端mvc框架。所以js模板机制也变得常见。
常见的是JSON数据转换成HTML代码填充到页面中。
这个JSON数据就是通过AJAX取到的。
template.js插件和ajax一起使用的例子的更多相关文章
- jQuery通过jquery.form.js插件使用AJAX提交Form表单
我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可. ...
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)
就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- 使用ajaxfileupload插件进行Ajax Post 异步提交多个文件
前台代码: <div> <div> <img src="images/pro_upload.png" onclick="javascript ...
- JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框
平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...
随机推荐
- C语言 链表基本函数
#include <stdio.h> #include <malloc.h> typedef struct my_node mynode; struct my_node{ ...
- 【JS】 伪主动触发input:file的click事件
大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种: 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的 ...
- JavaScript 代码小片段
1.获取对象 obj 的所有属性(自有属性和继承属性),保存到数组 lst 中 //获取对象obj的所有属性(自有属性和继承属性),保存到数组lst 中 var lst = []; function ...
- 2018.07.03 POJ 2653 Pick-up sticks(简单计算几何)
Pick-up sticks Time Limit: 3000MS Memory Limit: 65536K Description Stan has n sticks of various leng ...
- 2018.08.29 NOIP模拟 pmatrix(线性筛)
[问题描述] 根据哥德巴赫猜想(每个不小于 6 的偶数都可以表示为两个奇素数之和),定义 哥德巴赫矩阵 A 如下:对于正整数对(i,j),若 i+j 为偶数且 i,j 均为奇素数,则 Ai,j = 1 ...
- 46 What Is Real Happiness ? 什么是真正的幸福 ?
46 What Is Real Happiness ? 什么是真正的幸福 ? ①The way people hold to the belief that a fun-filled, pain-fr ...
- UVa 210 Concurrency Simulator (双端队列+模拟)
题意:给定n个程序,每种程序有五种操作,分别为 var = constant(赋值),print var (打印), lock, unlock,end. 变量用小写字母表示,初始化为0,为程序所公有( ...
- Windows 下安装ReText
打算使用MarkDown了,群友推荐使用ReText,基于Python的,同时依赖了Python的几个包,通过easystall可以方便地安装,同时制作了快捷启动方式,网上找了篇文章以备忘. Inst ...
- bootstrap-treeview 关于checkbox选择框不显示的问题
bootstrap-treeview.js 1.0.2 不支持checkbox,最后使用 bootstrap-treeview.js 1.2.0 解决此问题.
- Python学习-28.Python中的列表切片
在实际的业务过程中,经常有这么一个操作:取一个列表的一部分进行操作,而不影响原来的列表.也就是将原来的列表复制一个部分副本并对其进行操作. 举个完整例子: list = ['a','b','c','d ...