JS数据模板分离(告别字符串拼接)-template
刚开始在写第一个动态网页的demo时,由于html不多,便使用字符串拼接的方法添加到dom来渲染,可是在后来写某外卖app时也需要如此添加,打开代码一看几千行,突然感觉累觉不爱
一行行的拼接有这功夫别人项目都上线了。于是在苦苦寻找之下,发现了可以使用js模板来渲染,还可以跟html文件相分离,终于等到你,还好我没放弃。
话不多说,进入正题吧
首先我们要引入一个js插件,这便是underscore.js,这个东西的功能很强大,当我发现时感觉被压在身下无法喘气。
然后我们可以创建一个函数,记住这个函数,等下他有大作为,因为这样我们便可以多次调用来插入模板。
function _gettpl(tplName, data){
return _.template($('#' + tplName).html())(data);
};
接下来便是生成模板吧,先看下面代码,这个就是完整版了,插入以后就长这个样子。
<ul id=“wife”>
<li>
<p>我是模板</p>
</li>
</ul>
我们需要在html页面中添加<script type="text/template" id="man"></script>,将html元素全部塞进去,那么便已经生成模板了
这里要注意的是,在标签里的内容,一般情况下<script>标签智能补全的内容是type="text/javascript" 我们需要将其替换成type="text/template"。以及在里面命名一个id为“man”
<script type="text/template" id="man">
<li>
<p>我是模板</p>
</li> </script>
这样子就可以啦,心里是不是一万只草泥马奔腾而过?我拼死拼活拼接字符串,你两句就搞完了?不不不,大侠饶命,其实我们还没写完这个时候我们要在js文件中写下这么一句代码
$('#wife').html(_gettpl('man', {'data': data}));
这个时候就是真的完成了呢。你可能要问了,那Id=“wife“的孙子是谁,其实就是你模板插进去的父类啦”。
还不懂?那亲我一下就给你解释一遍
最后在总结一下流程:
1、静态页html构建完成后拿到数据
2、引入underscore.js(这个自己网上下载下来就可以了)
3、将需要数据替换的html放进script标签里(// <script type="text/template" id="xxx"> HTML模板 </script >)
4、在模板中的需要使用js的语法是以<% %>来包裹,例如循环
<% _.each( 需要遍历的数据,像data.xxx ,function(){ %>
HTML代码
<% }) %>
开始用<% %>包住第一部分代码,分行后里面html内容不需要再用<% %>包裹,正常填写,最后结尾的js代码再以<% %>包住就可以了
5、第三步script中的id,就是插入父级的id,通常在父级也会有一个id,例如 <ul id="aa"></ul>
模板是<script type="text/template" id="bb">
<li>需要插入的数据</li>
</script >
接下来在js里面便是写 将id=“bb”的html插入到id=“aa”的容器中。
6、js通常会定义一个函数,比如
function _gettpl(tplName, data){
return _.template($('#' + tplName).html())(data);
}
函数接受2个参数,tplName是传入的id,也就是需要插入容器的内容,id=“bb”,data就是你的数据了,接下来就可以将内容插进容器了
$('#aa').html(_gettpl('bb', {'data':data}))
这样子他就插进去了
还想看?不了不了,营养跟不上,先到这里。
JS数据模板分离(告别字符串拼接)-template的更多相关文章
- js扩展String.prototype.format字符串拼接的功能
1.题外话,有关概念理解:String.prototype 属性表示 String原型对象.所有 String 的实例都继承自 String.prototype. 任何String.prototype ...
- Mock.js——数据模板定义
1. 安装 npm install mockjs --save-dev //安装开发依赖 2. 数据模板定义规则 Mock.mock({...}) String: 'string|num1-num2' ...
- ajax+js数据模板+后台
.net 后台,ajax+js模板引擎的数据填充,制作无刷新分页 js模板用laytpl 待续...
- js基础---元素操作时字符串拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery.pagination.js数据无刷新真分页
定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...
- JS模板引擎:基于字符串拼接
目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...
- 小程序公共模板template与公共js数据utils的引用实例
在小程序项目开发中,经常会遇到公共模板与公共js数据的调用,这里结合自己的项目为这一需求做一简单介绍 目录截图 现在是有一个评论版块需要在几个页面里共用 先将评论版块的wxml剔出来放在templat ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- Javascript模板及其中的数据逻辑分离思想(MVC)
#Javascript模板及其中的数据逻辑分离思想 ##需求描述 项目数据库的题目表描述了70-120道题目,并且是会变化的,要根据数据库中的数据描述,比如,选择还是填空题,是不是重点题,题目总分是多 ...
随机推荐
- Tomcat源码分析——请求原理分析(上)
前言 谈起Tomcat的诞生,最早可以追溯到1995年.近20年来,Tomcat始终是使用最广泛的Web服务器,由于其使用Java语言开发,所以广为Java程序员所熟悉.很多人早期的J2EE项目,由程 ...
- 【AppScan】入门工作原理详解
AppScan,即 AppScan standard edition.其安装在 Windows 操作系统上,可以对网站等 Web 应用进行自动化的应用安全扫描和测试.Rational AppScan( ...
- zabbix使用(自定义监控、自动报警)
自定义监控(制作模板) zabbix自带模板Template OS Linux (Template App Zabbix Agent)提供CPU.内存.磁盘.网卡等常规监控,只要新加主机关联此模板,就 ...
- 0/1背包问题(DP)
Description 给定 n 个物品和一个背包.物品 i 的重量是 wi ,其价值为 vi ,背包的容量为 C .问:应该如何选择装入背包的物品,使得装入背包中物品的总价值最大? Input 输入 ...
- 【7】.net WebAPI Owin OAuth 2.0 密码模式验证实例
1.OAuth密码模式 2.在VS中创建WebAPI项目 在nuget中安装: Microsoft.AspNet.WebApi.Owin Microsoft.Owin.Host.SystemWeb 这 ...
- [javaSE] 多线程(join方法)
多条线程并发执行,随机切换,调用join()方法,会使当前线程所在的线程(一般主线程)冻结,直到当前线程结束,所在的线程才恢复继续执行 class JoinTestDemo implements Ru ...
- IntelliJ IDEA 2018.3 安装+永久激活[Windows]
IntelliJ IDEA 作为一个优秀的Java开发环境,深受许多开发者喜爱,但是它的价格却贵得让人无法接受,这篇文章将介绍永久激活IntelliJ IDEA的方法(使用破解补丁). 系统环境:Wi ...
- DevExpress13.2.9 控件使用经验总结
一.换肤功能 1. 添加 DevExpress.OfficeSkins 和 DevExpress.BonusSkins 两个引用 2. 皮肤注册 DevExpress.UserSkins.BonusS ...
- git杂记-撤销操作
覆盖上一次的提交或重新更新提交说明 $ git commit --amend -m '我再次提交啦,上一次的提交已经不见啦.这是一个危险的操作哦.哈哈,其实并不危险,也是可以数据恢复的啦' 取消已暂存 ...
- js点击事件在苹果端失效的问题
在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定 ...