JavaScript模板入门介绍
发布时间:2024-06-21 22:06:17
标签:JavaScript,模板入门
比如要在一个列表中利用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/
0
投稿
猜你喜欢
- 简单使用安装celery及redis定义celery任务项目下新建tasks.pyfrom celery import Celery# 创建
- 本文实例讲述了Python3实现并发检验代理池地址的方法。分享给大家供大家参考,具体如下:#encoding=utf-8#author: w
- MSSQL差异备份,就是和前一次备份作对比,把不一样的内容备份下来,这样,只要前一次备份后,插入新的内容,差异备份就可以把刚插入的内容备份出
- 本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记首先创建一个本地json文件,放在项目中如下{ &q
- 我就废话不多说了,大家还是直接看代码吧~package mainimport ( "net/http")func mai
- 之前一直有过疑惑为什么MySQL数据库存timestamp可以无视时区问题.在业务中也是一直使用Laravel框架,内置的Migration
- 什么是函数重载?简单的理解,支持多个同名函数的定义,只是参数的个数或者类型不同,在调用的时候,解释器会根据参数的个数或者类型,调用相应的函数
- Python中,列表是可以进行修改的:赋值、删除元素、分片等等。在给列表添加元素时,有两个常见的方法:append和extend。appen
- 导言GridView是由一组字段(Field)组成的,它们都指定的了来自DataSource中的什么属性需要用到自己的输出呈现中。最简单的字
- 创建SQL存储过程需要使用到的语法- 创建存储过程CREATE 存储过程的名称(参数)BEGIN...需要执行的SQL语句END- 调用CA
- 文中为大家分享了三种JavaScript判断对象是否为数组的方法,1. typeof首先我们会想到的是使用typeof来检测数据类型,但是对
- 识别发票录入发票是一件繁琐的工作,如果可以自动识别并且录入系统,那可真是太好了。今天我们就来学习一下,如何自动识别增值税发票并且录入系统~识
- 前言前面几个章节我们学习了对于普通文件的操作,比如说文件的创建、复制粘贴、裁剪粘贴、文件名的重命名、删除等等。另外还学习了一些基本练习,如何
- 前言:常见的加密算法基本分为这几类:线性散列算法(签名算法)MD5,sha1对称性加密算法 AES DES非对称性加密算法 RSA一、md5
- 网上考试设计思路是怎样的?为了运行这个应用程序,我们需要在global.asa文件里进行设置数据库的连接。global.asa <&n
- 如何定义记录集打开的游标类型和锁定类型?我们知道,打开记录集时,可以定义记录集打开的游标类型和锁定类型。在adovbs.inc文件中就定义了
- ##通过sqlcmd执行sql文件由于sql文件过大,超过了100M,再数据库的窗口执行,结果超出内存了,对于特别大的sql文件可以使用sq
- 在 Go 里面的协程执行实际上默认是没有严格的先后顺序的。由于 Go 语言 GPM 模型的设计理念,真正执行实际工作的实际上是 GPM 中的
- DRF中的Request在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很
- 【简介】django-admin.py是Django的一个用于管理任务的命令行工具。本文将描述它的大概用法。另外,在每一个Django pr