背景:之前写前后端不分离的项目,都是通过ThinkTemplate(thinkphp)和Thymeleaf、FreeMarker(Java)去实现的,但是有些数据需要动态去体现使用过ajax去手动操作dom通常有点麻烦,偶然间知道这个js模板还是蛮感兴趣,功能强大。
文章目录
一、Handlebars.js是什么?
二、使用步骤(each-基本循环使用方法)
三、进阶
总结
前言
小弟之前愚蠢的想法就是ajax请求的话都是一个一个去添加,每一块内容先拼接好一整块,然后再循环输出。(这里指ajax请求的情况下,其他情况下不分离模板直接for很快的)
直到今天,遇到了handlebars.js
handlebars.js可以在提前设置好的模板内渲染出内容,功能强大下面演示
提示:以下是本篇文章正文内容,下面案例可供参考
一、Handlebars.js是什么?
Handlebars.js是一个Javascript客户端的模板引擎(它也能用于服务器端)。它是一个Javascript库,就像你在页面中包含其他.js文件一样。有了它,在你的HTML页面内添加模板,模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。
二、使用步骤(each-基本循环使用方法)
1.设置模板
代码如下:
html:
<body>
<script id="template" type="text/x-handlebars-template">
<ul>
{{#each items}}
<li>{{this.name}} - {{this.value}}</li>
{{/each}}
</ul>
</script>
<div id="result"></div>
<a href="javascript:;" onclick="ceshi()">测试</a>
<a href="javascript:;" onclick="xuanran()">渲染</a>
</body>
template就是我们设置好的模板,相当于你设置好了一个商品展示卡(我上面的图)
2.Ajax获取数据
代码如下:
Javascript:
<script>
function ceshi(){
$.ajax({
type: "GET",
url: "",
success: function(e) {
console.log(e)
},
error: function() {
console.log('失败')
}
})
};
function xuanran(){
$.ajax({
url: '',
method: 'GET',
success: function(data) {
var source = $('#template').html();
var template = Handlebars.compile(source);
var html = template({ items: data.data });
console.log(html);
$('#result').html(html);
}
});
};
</script>
这里是利用Ajax去请求后端获取数据。
这里可以看出,数据是从这边传进去的:
template({ items: data.data });
3.后端提供数据
public function test()
{
$a = [
['name' => '名字','value' => '小明'],
['name' => '年龄','value' => '18'],
['name' => '性别','value' => '男'],
['name' => '身高','value' => '181'],
['name' => '体重','value' => '70kg'],
];
if(false === $this->request->isAjax())
{
return view();
}
return api($a,200,'请求成功');
}
这里是测试数据故意弄成这样子
这种数据格式也是经常见吧,不像常规的很好认的那种
效果
点击获取数据后就会渲染。
分析
你得到数据之后,他是这样的
//这个js
var html = template({ items: data.data });
//说明你已经拿到这样的数据了
"data": [
{
"name": "名字",
"value": "小明"
},
{
"name": "年龄",
"value": "18"
},
{
"name": "性别",
"value": "男"
},
{
"name": "身高",
"value": "181"
},
{
"name": "体重",
"value": "70kg"
}
]
//然后这边#each表示进入
{{#each items}}
//说明到达每一块
{
"name": "名字",
"value": "小明"
}
//这里你就只能用
{{this.name}} - {{this.value}}
//这种模板还是很可以
三、进阶
这样我们就可以做更复杂的操作了
each-基本循环使用方法
前端:
<body>
<h1>each-基本循环使用方法</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
</body>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url:'student',
method:'GET',
success:function(data){
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
$('#tableList').html(myTemplate(data.data));
}
});
});
</script>
后端:
public function test1()
{
if(false === $this->request->isAjax())
{
return view();
}
}
public function student()
{
$student = [
[
'name' => "张三",
'sex' => "男",
'age' => 28
],
[
'name' => "李四",
'sex' => "女",
'age' => 30
],
[
'name' => "妞妞",
'sex' => "女",
'age' => 32
]
];
return api(['student'=>$student],200,'请求成功');
}
应该很好分析这个是干嘛的
with-进入到某个属性(进入到某个上下文环境)
分析:
首先来构造一个复杂的json(工作中经常遇到的,给前端小姐姐上点压力)
先给大家看看前端的页面加载出来是没有数据的
等到数据出来时,他才开始渲染出来:(其实这一直是我想要的,用vue或者其他也能达到这种效果,但是还是喜欢有些杂糅在一起的)
代码如下:
前端:
<body>
<h1>with-进入到某个属性(进入到某个上下文环境)</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
<td>
{{#with favorite}}
{{#each this}}
<p>{{name}}</p>
{{/each}}
{{/with}}
</td>
</tr>
{{/each}}
</script>
</body>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url:'test2api',
method:'GET',
success:function(data){
//$("#table-template").html()是jquery的语法。。。
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。
$('#tableList').html(myTemplate(data.data.student));
}
});
});
</script>
后端:
public function test2()
{
if(false === $this->request->isAjax())
{
return view();
}
}
public function test2api()
{
$student = [
[
'name' => "张三丰",
'sex' => "男",
'age' => 28,
'favorite' =>[
['name' => "唱歌"],
['name' => "篮球"]
]
],
[
'name' => "李妮妮",
'sex' => "女",
'age' => 30,
'favorite' =>[
['name' => "上网"],
['name' => "足球"]
]
],
[
'name' => "王妞妞",
'sex' => "女",
'age' => 18,
'favorite' =>[
['name' => "电影"],
['name' => "旅游"]
]
]
];
return api(['student'=>$student],200,'请求成功');
}
这个老哥写的好,可以参考他的,我也是参考他的:JavaScript页面模版引擎handlebars.js学习及使用_handlebars.js for-CSDN博客
对了我这tp8写的返回json的函数是这个:
function api($data, $code = 200, $msg = 'Success')
{
$result = [
'code' => $code,
'message' => $msg,
'data' => $data,
];
return json($result);
}
放在公共函数那边
总结
Ajax渲染页面的很早就想用找不到方便的,奈何本身就懒得写dom(我很菜),找到这个可以做很多事。
有的时候咱页面又不想被扒下来,就可以用这种方式
1.在Ajax请求的时候加个加个参数:域名还是其他加密起来,传过去参数(域名)不对,就得不到数据了,跨域也给它开上。
var domain = document.domain;
$.ajax({
url: '/xxxxx?domain='+domain,
method: 'GET',
success: function(data) {
var source = $('#template').html();
var template = Handlebars.compile(source);
var html = template({ items: data.data });
console.log(html);
$('#result').html(html);
}
});
2.把F12禁用掉,不要让他看到咱返回的数据结构。