template-web

M：template-web是什么东西，有什么作用？

Z：这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。

M：具体使用的方式是怎么样的呢？

Z：这里有个demo

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body><h3>模板引擎的使用</h3>
</body>
</html><!-- 模板 -->
<!-- 引入模板引擎js -->
<script src='template-web.js'></script><!-- 制作模板 -->
<script type="text/html" id="template"><ul><li>姓名{{name}}</li><li>年龄{{age}}</li><li>电话{{phone}}</li></ul>
</script><script>// 获取数据var data = {name:"Ray",age:"18",phone:"18233989613"};// 将数据放入模板中var res = template("template", data);console.log(res);// 将模板放入页面中document.body.innerHTML = res;</script>

简要步骤就是：1.制作模板 2.将数据插入模板中 3.将模板插入html代码中

if判断

M：但是呢，如果我们需要根据数据的不同，做出调整，要怎么使用不同的模板呢？

Z：可以在模板中进行判断，template-web提供的判断方法如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{border: red 1px solid;margin-top: 10px;}</style>
</head>
<body><div id="ifBox"></div><div id="norBox"></div><div id="eachBox"></div><!--引入模板引擎:一般用于在网络请求之后，展示相同的多条数据
-->
<script type="text/javascript" src="template-web.js" ></script><!--1.逻辑语句---条件语句的使用
-->
<script type="text/html" id="ifPersonTemplate">
<ul>{{if sex=="女"}}<li>姓名:{{name}} 女士<ol><li>最新款的包包</li><li>你真{{skill}}</li></ol></li>{{else if sex=="男"}}<li>姓名:{{name}} 先生<ol><li>最新款的西装</li><li>你真{{skill}}</li></ol></li>{{/if}}
</ul>
</script>
<script type="text/javascript">//定义数据var person1 = {name:"赵丽颖",sex:"女",skill:"可爱"};var person2 = {name:"胡歌",sex:"男",skill:"帅气"};/*** 利用模板引擎 引用数据填充到模板中** 参数一：模板id* 参数二：数据*/var result =  template("ifPersonTemplate",person1);var result2 =  template("ifPersonTemplate",person2);//将返回的模板结果添加到界面中var ifBox = document.getElementById("ifBox");ifBox.innerHTML = result + result2;
</script>

html效果

M：如果我想插入一段html标签，例如<a>标签，但是我直接插进去显示的是标签的内容，而并非效果，该怎么将html文本转化为html实现效果呢？

Z：在{{内容}}的内容前面添加@标志，如以下代码，即可将html文本转化为html实现效果

<!--2.原文输出
-->
<script type="text/html" id="norTemplate"><ul><li>{{name}}</li><li>{{skill}}</li><li>{{@info}}</li></ul>
</script>
<script type="text/javascript">var data = {name:"漩涡鸣人",skill:"多重影分身",info:"<a href='https://baike.baidu.com/item/%E6%BC%A9%E6%B6%A1%E9%B8%A3%E4%BA%BA/322717?fr=aladdin'>个人信息</a>"};var result = template("norTemplate",data);var norBox = document.getElementById("norBox");norBox.innerHTML = result;
</script>

循环

M：现在有种需求就是，我得到返回数据的是一堆数组，我希望将数组循环输出模板，应该怎么实现？

Z：使用template-web.js自带的循环语句

<!--3.循环语句
-->
<script type="text/html" id="eachTemplate"><ul><li>组织: {{key}}}</li><li>组员:{{each person}}<ol> {{$index}}{{$value}} </ol>{{/each}}</li><li>组员信息:{{each info}}<ol>{{$value.name}} --- {{$value.age}} </ol>{{/each}}</li></ul>
</script>
<script type="text/javascript">var family = {key:"APP开饭团队",person:["刘强","黄冲","熊斌"],info:[{name:"刘强",age:23},{name:"黄冲",age:26},{name:"熊斌",age:22}]};var result = template("eachTemplate",family);var eachBox = document.getElementById("eachBox");eachBox.innerHTML = result;
</script>

D：以上三种效果分别对应以下三个红框（if判断，html效果，循环）

D：最后公布template-web.js的下载地址

(本文例子来自LQ-刘强)

前端模板template-web简单使用相关推荐

html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
X-admin经典前端后台管理模板，基于layui的轻量级前端后台管理框架，简单，兼容性好，面向所有层次的前后端程序
X-admin 简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序.创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的.#X-a ...
C++类模板template ＜class T＞简单使用方法
一个简单的例子两个数比大小如果两个数都是int类型 class Compare_int { public :Compare(int a,int b){x=a;y=b;}int max( ){ret ...
html网页设计期末大作业——化妆品展示静态模板(9页) web前端开发技术 web课程设计网页规划与设计
html网页设计期末大作业--化妆品展示静态模板(9页) web前端开发技术 web课程设计网页规划与设计常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...
前端模板引擎template之如何实现if-else、遍历
1.先来了解一下template模板 <!doctype html> <html lang="en"> <head><meta chars ...
一个对前端模板技术的全面总结
此文的写作耗时很长,称之为雄文不为过,小心慢用此文缘由其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面  就是给 ...
前端模板技术的全面总结
此文缘由其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面  就是给我这个画面突然发现取名字真是个大学问,当时就基 ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
web前端面试题整理(vue、uni-app、前端三件套、web基础)
Vue 对mvvm的理解 mvvm分为model.view.viewmodel三者 model代表数据模型 view代表视图 viewmodel代表连接视图和模型,实现了vue数据的双向绑定 view ...

前端模板template-web简单使用

template-web

if判断

html效果

循环

前端模板template-web简单使用相关推荐

最新文章

热门文章