JavaScript模板入门介绍


Posted in Javascript onSeptember 26, 2012

比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中。无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的——无论哪种方法都是一样。
这个拼接过程放在JavaScript文件中,显得非常不优雅。如果还把style也放在JavaScript中,那数据、结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了<li>标签,这样的页面几乎不存在扩展性了,修改一个前台样式都要涉及后台代码的修改。

后来我们知道了不要在JavaScript中对DOM进行style定制,而是只需要在CSS文件中定义好对应的class,然后在JavaScript中使用这个class就好。

接下来我们要做的就是用JavaScript模板把HTML结构(在这个案例中,是<li>标签)也从JavaScript中分离。

市面上的JavaScript模板很多了,以handlebars这个优秀的模板为例吧:

我们在页面的html中定义模板:

<script id="list-template" type="text/x-handlebars-template"> 
<li>{{title}}</li> 
</script>

然后在我们的逻辑JavaScript代码中可以把数据拼接到这一模版中:
var source = $("#list-template").html(); //模板源,一般放在html的script中,这里我们使用jQuery,也可以使用其它方法直接获得内容字符串 
var template = Handlerbars.compile(source); //编译生成一个模板template 
var context = {title:"This is a todo item"} //获得数据,数据一般从ajax或者input中取得 
var html = template(context); //数据+模板=新的html

这就是基本的 用法了,更多逻辑可以参考官方文档:http://handlebarsjs.com/
Javascript 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
web 页面分页打印的实现
Jun 22 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
js重写方法的简单实现
Jul 10 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 #Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 #Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 #Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 #Javascript
js DOM 元素ID就是全局变量
Sep 20 #Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 #Javascript
JavaScript 更严格的相等 [译]
Sep 20 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
js实现日历的简单算法
2017/01/24 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
大学辅导员事迹材料
2014/02/05 职场文书
写自荐信的注意事项
2014/03/09 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
李培根演讲稿
2014/05/22 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
高中团支书竞选稿
2015/11/21 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js