**
handlebar
**
概述与介绍
- Handlebars 是 JavaScript
一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。 - 简单的说就是：Handlebars是一个很好的前后端的分离的方案
使用
Handlebars的安装是比较简单和方便的;handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js
handlebars的出现，解决了远古时期，使用字符串拼接标签的尬局，而handlebars作为模板引擎，将html结构固化，数据以变量的形式代替，这样html更容易维护，开发更方便，这种开发模式也导致前端mvc框架的出现。
<script src="jquery.min.js"></script>
<script type="text/javascript" src=".js/handlebars.js"></script>
handlebar模板引擎中的each用法
适用场景：循环遍历数组显示渲染数据
html中：
<div class="list-box">
<ul id="goodsBox">
<!-- <li>
<img src="img/barcode.png" alt="">
<div class="right-wrap">
<p class="title">小新青春版14.0英寸轻薄笔记本</p>
<div class="des-box">
<p class="des">酷睿i7-8565U/Windows 10 家庭中文版/14.0英寸/8G</p>
<div class="btn-recommand">立即推荐</div>
</div>
<div class="price-des">¥5099</div>
</div>
</li> -->
</ul>
<div class="btn-more-des">
<a href="javascript:void(0)" class=""></a>
</div>
</div>
<script id="hbsGoodsList" type="text/x-handlebars-template">
{
{#each this}}
<li data-pcurl="{
{pcDetailUrl}}" data-wapurl="{
{wapDetailUrl}}">
<div class="left-wrap">
<img src="{
{imageUrl}}" alt="">
{
{#resource_name is_mark}}{
{/resource_name}}
<!-- <div class="good-source">其他通路货源</div> -->
</div>
<div class="right-wrap">
<p class="title">{
{
{name}}}</p>
<div class="des-box">
<p class="des">{
{
{statement}}}</p>
<div class="btn-recommand" data-name="{
{name}}" data-des="{
{statement}}" data-img="{
{imageUrl}}" data-price="{
{price}}" data-gooid="{
{itemId}}">立即推荐</div>
<div class="creathaibao" data-name="{
{name}}" data-des="{
{statement}}" data-img="{
{imageUrl}}" data-price="{
{price}}" data-gooid="{
{itemId}}">生成海报</div>
</div>
<div class="price-des">¥{
{price}}</div>
</div>
</li>
{
{/each}}
</script>
js中
function fetchGoodsList(value) {
api.ajaxApi({
url: api.apihref + 'paas/searchGoodsList',
type: 'get',
newjoggle: true,
data: {
keyword: value,
pageNum: _page,
}
}).done(function (res) {
if (res.status_code == 200) {
//请求接口成功之后将数据通过Handlebars循环遍历渲染到页面上
var tpl = Handlebars.compile($('#hbsGoodsList').html());
var html = tpl(res.data.data);
$('#goodsBox').append(html); // 尾部添加
}
}).always(function () {
lnv.destroyloading(); // 上划加载
})
}
传参解析:
<div class="btn-recommand" data-name="{
{name}}" data-des="{
{statement}}" data-img="{
{imageUrl}}" data-price="{
{price}}" data-gooid="{
{itemId}}">立即推荐</div>
- data-name="{ {name}}" { {name}}指的是返回数据数组中对象的字段
- 可以在js文件中通过 $(’.btn-recommand’).data(‘name’)来获取到