共计 4033 个字符，预计需要花费 11 分钟才能阅读完成。
背景：之前写前后端不分离的项目，都是通过 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：
测试
渲染
template 就是我们设置好的模板，相当于你设置好了一个商品展示卡（我上面的图）
2.Ajax 获取数据
代码如下：
Javascript：
这里是利用 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- 基本循环使用方法
前端：
each- 基本循环使用方法
姓名
性别
年龄
后端：
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 或者其他也能达到这种效果，但是还是喜欢有些杂糅在一起的）
代码如下：
前端：
with- 进入到某个属性 (进入到某个上下文环境)
姓名
性别
年龄
兴趣爱好
后端：
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 禁用掉，不要让他看到咱返回的数据结构。
原文地址: handlebars.js 使用：用 ajax 渲染内容到前端
