有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。
首先我们先来定义我们需要的模板,在id为template的script块里:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Simple Templating</title>
</head>
<body>
<div class="result"></div>
<script type="template" id="template">
<h2>
<a href="{{href}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
</body>
</html>
然后,我们需要通过Ajax等其它方式获取所需要的数据,这里为了展示方便,我们使用了自己定义的数组:
var data = [
{
title: "Knockout应用开发指南",
href: "http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html",
imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_knockout2.jpg"
},
{
title: "微软ASP.NET站点部署指南",
href: "http://www.cnblogs.com/TomXu/archive/2011/11/25/2263050.html",
imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg"
},
{
title: "HTML5学习笔记简明版",
href: "http://www.cnblogs.com/TomXu/archive/2011/12/06/2277499.html",
imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png"
}
],
我们有2种方式来绑定这些数据到模板上,第一种是非常简单的hardcode方法,第二种是自动识别变量式的。
我们先来看第一种方式,是通过替换花括号里的值为data里所对应的值来达到目的:
template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
i = 0, len = data.length,
fragment = '';
for ( ; i < len; i++ ) {
fragment += template
.replace( /\{\{title\}\}/, data[i].title )
.replace( /\{\{href\}\}/, data[i].href )
.replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
}
result.innerHTML = fragment;
运行效果:http://jsfiddle.net/TomXu/3GKw2/
第二种方式比较灵活,是通过正则表达式来替换所有花括号的值,而无需一个一个替换,这样相对来说比较灵活,但是要注意模板标签可能在数据里不存在的情况:
template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
attachTemplateToData;
// 将模板和数据作为参数,通过数据里所有的项将值替换到模板的标签上(注意不是遍历模板标签,因为标签可能不在数据里存在)。
attachTemplateToData = function(template, data) {
var i = 0,
len = data.length,
fragment = '';
// 遍历数据集合里的每一个项,做相应的替换
function replace(obj) {
var t, key, reg;
//遍历该数据项下所有的属性,将该属性作为key值来查找标签,然后替换
for (key in obj) {
reg = new RegExp('{{' + key + '}}', 'ig');
t = (t || template).replace(reg, obj[key]);
}
return t;
}
for (; i < len; i++) {
fragment += replace(data[i]);
}
return fragment;
};
result.innerHTML = attachTemplateToData(template, data);
运行效果:http://jsfiddle.net/TomXu/HjSLf/
这样,我们就可以做到,无限制定义自己的标签和item属性了,而无需修改JS代码。
更多关于模板引擎的信息,你可以访问如下2个地址,这2个引擎都不错哦。
参考原文:http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/
同步与结束语
本文已同步至目录索引:《大叔手记全集》
大叔手记:旨在记录日常工作中的各种小技巧与资料(包括但不限于技术),如对你有用,请推荐一把,给大叔写作的动力
随笔档案 - 2011年12月
大叔手记(7):构建自己的JavaScript模板小引擎
2011-12-15 19:35 by 汤姆大叔, 483 visits, 网摘, 收藏, 编辑摘要:有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。首先我们先来定义我们需要的模板,在id为template的script块里:<!doctype html><html><head> <meta charset=utf-8> <title>Simple Templating</title></head><body> <div cla 阅读全文
探讨神奇的需求变更:程序员遭遇车祸成植物人,需求变更将其唤醒
2011-12-15 15:56 by 汤姆大叔, 1623 visits, 网摘, 收藏, 编辑摘要:北京程序员王XX遭遇车祸成植物人,医生说活下来的希望只有万分之一,唤醒更为渺茫。可他的Lead和亲人没有放弃,他们根据王XX工作如命的作风,每天都在他身边念:“XX,需求又改了,该干活了,你快来呀!”,奇迹终于发生了,王XX醒来了,第一句话:“需求又改了?”。 阅读全文
深入理解JavaScript系列
2011-12-15 10:02 by 汤姆大叔, 9 visits, 网摘, 收藏, 编辑摘要:深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力。深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点深入理解JavaScript系列(2):全面解析Module模式深入理解JavaScript系列(3):命名函数表达式探秘 阅读全文
大叔翻译博文索引
2011-12-15 09:52 by 汤姆大叔, 2 visits, 网摘, 收藏, 编辑摘要:以下文章,如对你有用,请推荐一把,给大叔写作的动力【翻译】大型JavaScript应用程序架构模式【翻译】我钟爱的Visual Studio前端开发工具/扩展【翻译】我钟爱的HTML5和CSS3在线工具【翻译】使用Modernizr探测HTML5/CSS3新特性【翻译】ASP.NET MVC:转化业务对象到Select List Items上【翻译】使用Lazy<T>和抽象包装类延迟加载复杂的系统参数 阅读全文
大叔手记(6):巧用ASP.net MVC3里的HandleErrorAttribute
2011-12-15 08:42 by 汤姆大叔, 913 visits, 网摘, 收藏, 编辑摘要:前言一直在给Team的人强调“Good programming is good Error Handling”,没人喜欢YSOD(Yellow Screen of Death)。我每次看到黄页的时候都是心惊肉跳的,尤其是在给客户演示的时候,所以在任何时候,如果出现黄页是由于你开发的代码导致的话,对不起,我会给你的绩效打很低的分。当然,有些情况的黄页,在某些特殊的情况,我们可能真的无法预知,但我们起码得一些技巧让终端用户看不到这个YSOD页面。方案幸运的是,在MVC3里有现成的功能支持让我们可以做到这一点,它就是HandleErrorAttribte类,有2种方式可以使用它,一是在类或者方法上直 阅读全文
HTML5学习笔记简明版(9):变化的元素和属性
2011-12-15 08:40 by 汤姆大叔, 69 visits, 网摘, 收藏, 编辑摘要:
本章节介绍的HTML5的对现有元素和属性的更改,其中元素有14个类型的更改,属性有7大类的更改。例如,没有href属性的a元素将显示成一个占位符,而且a元素内部现在支持flow content类型的元素了(例如:article, input, span等)。address可以被article, aside, nav, section限定范围了,以前只能作用于全局范围。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
本章节介绍的HTML5的对现有元素和属性的更改,其中元素有14个类型的更改,属性有7大类的更改。例如,没有href属性的a元素将显示成一个占位符,而且a元素内部现在支持flow content类型的元素了(例如:article, input, span等)。address可以被article, aside, nav, section限定范围了,以前只能作用于全局范围。 阅读全文
大叔手记(5):使用QUnit结合MVC3来做JavaScript单元测试
2011-12-14 19:35 by 汤姆大叔, 715 visits, 网摘, 收藏, 编辑摘要:关于QUnit几乎所有的网站都在使用JavaScript,而所有的Javascript开发人员也都想做单元测试,但是一直都为付诸行动,大叔告诫大家,该做了,不然要被别人鄙视了,因为现在是个上网的人都应该用到了JavaScript,而且HTML5来临以后,越来越多的JavaScript代码要去开发。本文所用到的QUnit是由jQuery team开发的,原本是用于jQuery框架的测试,后来独立发展出来,可以测试任意JavaScript代码,而且提供了非常简单的API让你非常简单的来创建你的Test Case。先上个简单的代码:// calculator.jsvar Calculator = f 阅读全文
HTML5学习笔记简明版(8):新增的全局属性
2011-12-14 09:51 by 汤姆大叔, 59 visits, 网摘, 收藏, 编辑摘要:
本章节介绍的是HTML5在现有元素上增加的全局属性:contenteditable,contextmenu,data-*,draggable和dropzone,hidden,role和aria-*,spellcheck,主要是用来提供用户体验的。 比如,任何元素使用contenteditable属性的话,代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
本章节介绍的是HTML5在现有元素上增加的全局属性:contenteditable,contextmenu,data-*,draggable和dropzone,hidden,role和aria-*,spellcheck,主要是用来提供用户体验的。 比如,任何元素使用contenteditable属性的话,代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。 阅读全文
大型JavaScript应用程序架构模式
2011-12-14 09:06 by 汤姆大叔, 3706 visits, 网摘, 收藏, 编辑摘要:11月中旬在伦敦举行的jQuery Summit顶级大会上有个session讲的是大型JavaScript应用程序架构,看完PPT以后觉得甚是不错,于是整理一下发给大家共勉。PDF版的PPT下载地址:http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture注:在整理的过程中,发现作者有些思想是返来复去地说,所以删减了一部分,如果你的英文良好,请直接阅读英文的PPT。以下是本文的主要章节:1. 什么叫“JavaScript大型程序”?2. 顾当前的程序架构3. 阅读全文
大叔手记(4):jQuery自定义绑定的魔法升级版
2011-12-13 20:28 by 汤姆大叔, 1287 visits, 网摘, 收藏, 编辑摘要:jQuery自定义绑定首先让我们来看看jQuery的自定义绑定的使用方法,你可以使用bind或者live来订阅一个事件(当然1.7以后也可以使用on了),代码如下:$("#myElement").bind('customEventName',function(e){ ... });$(".elementsClass").live('customEventName',function(e){ ... });然后通过如下方式来触发事件:$("#myelement").trigger('customE 阅读全文
使用HTML5/CSS3五步快速制作便签贴特效
2011-12-13 11:58 by 汤姆大叔, 1573 visits, 网摘, 收藏, 编辑摘要:摘要本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果。第一步:创建基本HTML和正方形首先添加基本的HTML结构以及构建基本的正方形,代码如下: <ul> <li><a href="#"> <h2>Dudu:</h2> <p>最近咋没有美女发帖呢? 阅读全文
HTML5学习笔记简明版(7):新增属性(2)
2011-12-13 08:52 by 汤姆大叔, 951 visits, 网摘, 收藏, 编辑摘要:
本章节介绍的是HTML5对现有元素新增的属性。例如,input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl)。或者textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
本章节介绍的是HTML5对现有元素新增的属性。例如,input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl)。或者textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。 阅读全文
HTML5学习笔记简明版(6):新增属性(1)
2011-12-12 13:30 by 汤姆大叔, 1036 visits, 网摘, 收藏, 编辑摘要:
本章节介绍的是现有元素上新增的一批属性。为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
本章节介绍的是现有元素上新增的一批属性。为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问 阅读全文
HTML5学习笔记简明版(5):input的type超级类型
2011-12-12 08:39 by 汤姆大叔, 121 visits, 网摘, 收藏, 编辑摘要:
HTML5为input的type类型增加了多种枚举值,用来表达不同的意思,同事具有验证功能,如果格式不对,浏览器将原始提供错误提示,堪称超级牛X啊。同时大叔发现mhtml5网站上已经有很多现成的资料了,所以余下的一些新元素请大家自行参考该网站的资料学习,大叔将着重继续学习HTML5在现有元素上的更新改变。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
大叔手记(3):Windows Silverlight/Phone7/Mango开发学习系列教程
2011-12-11 16:59 by 汤姆大叔, 1286 visits, 网摘, 收藏, 编辑摘要:以下资料来自www.jeffblankenburg.com网站,是一个完整的系列,所以如果需要学习Mango系统的开发,需要先学习Silverlight,然后学习Windows Phone 7,最后再进入Mango的开发,这样做,可以循序渐进,以避免直接就进入Mango开发而导致的痛苦。另外文章底部也附加上了翻译的中文连接。31 Days of SilverlightDay #1: Mouse Events in SilverlightDay #2: Silverlight Screen TransitionsDay #3: Custom Silverlight Loading ScreenD 阅读全文
大叔手记全集
2011-12-10 16:23 by 汤姆大叔, 173 visits, 网摘, 收藏, 编辑摘要:大叔手记:旨在记录日常工作中的各种小技巧与资料(包括但不限于技术)大叔手记(7):构建自己的JavaScript模板小引擎大叔手记(6):巧用ASP.net MVC3里的HandleErrorAttribut 大叔手记(5):使用QUnit结合MVC3来做JavaScript单元测试大叔手记(4):jQuery自定义绑定的魔法升级版大叔手记(3):Windows Silverlight/Phone7/Mango开发学习系列教程大叔手记(2):为每个应用程序池单独设置aspnet.config配置文件大叔手记(1):使用Visual Studio的查找与替换替代默认的系统搜索 阅读全文
HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
2011-12-09 08:58 by 汤姆大叔, 1128 visits, 网摘, 收藏, 编辑摘要:
本章节介绍的HTML5的另外6个新元素video,audio,meter,datalist,keygen,output。通过video标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。audio有原生支持音频播放的功能,而不需要浏览器安装额外的扩展;目前支持audio元素的浏览器主要有Safari 4,Firefox 3.5和Chrome 3。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
2011-12-08 08:54 by 汤姆大叔, 1163 visits, 网摘, 收藏, 编辑摘要:
本章节介绍的HTML5的另外5个新元素hgroup,header,footer,address,nav。header元素是一种具有引导和导航作用的辅助元素。通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
HTML5学习笔记简明版(2):新元素之section,article,aside
2011-12-07 10:39 by 汤姆大叔, 1040 visits, 网摘, 收藏, 编辑摘要:
本章节主要介绍的是HTML5的三个新元素:section,article,aside。section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表introduction, news items和contact information。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
HTML5学习笔记简明版(1):HTML5介绍与语法
2011-12-06 09:33 by 汤姆大叔, 1817 visits, 网摘, 收藏, 编辑摘要:
HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如nav网站导航块和footer)。新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,比如视频音频用的video和audio,总结而言,有如下几大特点: 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png)
HTML5学习笔记简明版 目录索引
2011-12-06 09:19 by 汤姆大叔, 142 visits, 网摘, 收藏, 编辑摘要:之前学习HTML5的时候,没有及时记录下来,这周比较清闲,所以每天准备写一篇HTML5学习笔记简明版(1):HTML5介绍与语法HTML5学习笔记简明版(2):新元素之section,article,asideHTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,navHTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,outputHTML5学习笔记简明版(5):input的type超级类型HTML5学习笔记简明版(6):新增属性(1)HTML5学习笔记简明版(7):新增属性(2)HTML5学习 阅读全文
微软ASP.NET站点部署指南(11):部署SQL Server数据库更新
2011-12-05 12:42 by 汤姆大叔, 909 visits, 网摘, 收藏, 编辑摘要:![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg)
本章节展示的是如何向完整版SQL Server 数据库部署一个数据库升级。与第9章的数据库升级部署有所不同(第9章是部署到SQL Server Compact数据库)。
这个小节,做一个数据库修改和相应的代码更新,在部署到测试和生产环境之前,先在Visual Studio 里测试。修改内容是给Instructor 实体添加一个OfficeHours 列,然后再Instructors 页面上显示。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg)
本章节展示的是如何向完整版SQL Server 数据库部署一个数据库升级。与第9章的数据库升级部署有所不同(第9章是部署到SQL Server Compact数据库)。
这个小节,做一个数据库修改和相应的代码更新,在部署到测试和生产环境之前,先在Visual Studio 里测试。修改内容是给Instructor 实体添加一个OfficeHours 列,然后再Instructors 页面上显示。 阅读全文
Knockout应用开发指南 第十章:更多信息(完结篇)
2011-12-05 09:16 by 汤姆大叔, 870 visits, 网摘, 收藏, 编辑摘要:
本篇属于该系列教程的最后一章节,主要是列举了相关网站和帖子的一些信息,希望大家对Knockout这个JavaScript类库感兴趣,如果有任何问题,请在这里留言,大家一起讨论。本章节包括3部分(浏览器支持、需求帮助、更多教程和例子)。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_knockout2.jpg)
本篇属于该系列教程的最后一章节,主要是列举了相关网站和帖子的一些信息,希望大家对Knockout这个JavaScript类库感兴趣,如果有任何问题,请在这里留言,大家一起讨论。本章节包括3部分(浏览器支持、需求帮助、更多教程和例子)。 阅读全文
大叔手记(2):为每个应用程序池单独设置aspnet.config配置文件
2011-12-04 08:48 by 汤姆大叔, 1267 visits, 网摘, 收藏, 编辑摘要:ASP.NET2.0之后的版本就在各Framework的根目录下提供了一个aspnet.config文件,这个文件用来配置全局的一些信息,但是一直以来我们都没有怎么用过。ASP.NET4.0之后,这个配置文件在并发和线程方面得到了充分的支持。比如,可以设置maxConcurrentRequestsPerCPU, maxConcurrentThreadsPerCPU和requestQueueLimit等参数,用来更加灵活的设置asp.net runtime的配置。C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet.configC:\Win 阅读全文
大叔手记(1):使用Visual Studio的查找与替换替代默认的系统搜索
2011-12-03 13:54 by 汤姆大叔, 94 visits, 网摘, 收藏, 编辑摘要:一直以来,一直使用Visual Studio的查找与替换(Find and Replace)来搜索当前项目或整个解决方案里的代码,从来没怎么注意右边的那个选择文件夹功能。原来还可以选择非解决方案的文件夹,而且试用了一下,速度明显比默认的系统搜索功能快,尤其是在阅读.NET4.0源码的时候,效果真是高啊。大叔手记:旨在记录日常工作中的各种小技巧与资料(包括但不限于技术) 阅读全文
微软ASP.NET站点部署指南(10):迁移至SQL Server
2011-12-02 09:05 by 汤姆大叔, 879 visits, 网摘, 收藏, 编辑摘要:
SQL Server Express和完整版SQL Server
一旦你决定使用完整版SQL Server,你需要在开发和测试环境使用SQL Server Express 或者完整版SQL Server。在工具支持和数据库引擎功能上,SQL Server Compact 和其它版本的SQL Server都是有区别的,可以导致不同的代码产生不同的结果。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg)
SQL Server Express和完整版SQL Server
一旦你决定使用完整版SQL Server,你需要在开发和测试环境使用SQL Server Express 或者完整版SQL Server。在工具支持和数据库引擎功能上,SQL Server Compact 和其它版本的SQL Server都是有区别的,可以导致不同的代码产生不同的结果。 阅读全文
微软ASP.NET站点部署指南(9):部署数据库更新
2011-12-01 13:13 by 汤姆大叔, 863 visits, 网摘, 收藏, 编辑摘要:
不管什么时候,程序都有可能像代码更新一样更新数据库。本章节你将进行数据库修改,测试,然后部署到测试环境和生产环境。 提醒:如果根据本章节所做的操作出现错误信息或一些功能不正常的话,请务必check Troubleshooting页面。 阅读全文
![](https://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg)
不管什么时候,程序都有可能像代码更新一样更新数据库。本章节你将进行数据库修改,测试,然后部署到测试环境和生产环境。 提醒:如果根据本章节所做的操作出现错误信息或一些功能不正常的话,请务必check Troubleshooting页面。 阅读全文