**
manillar
**
Resumen e introducción
- Handlebars es
una biblioteca de plantillas semánticas para JavaScript que crea rápidamente plantillas web separando vistas y datos. Adopta la idea de "plantilla sin lógica", que se compila previamente al cargar, en lugar de compilarse cuando el cliente ejecuta el código, lo que puede garantizar la velocidad de carga y ejecución de la plantilla. - En pocas palabras: el manillar es una buena solución para separar los extremos delantero y trasero.
La instalación con Handlebars es relativamente simple y conveniente; Handlebars es una biblioteca JS pura, por lo que puede usar etiquetas de script para incluir handlebars.js como otros scripts de JS
La aparición de los manillares resuelve la incómoda situación de usar etiquetas de empalme de cadenas en la antigüedad. Como motor de plantillas, el manillar solidifica la estructura html y reemplaza los datos en forma de variables, de modo que html es más fácil de mantener y el desarrollo es más conveniente. Este modelo de desarrollo también condujo a la aparición del framework mvc front-end.
<script src="jquery.min.js"></script>
<script type="text/javascript" src=".js/handlebars.js"></script>
El uso de cada uno en el motor de plantilla del manillar.
Escenarios aplicables: recorra la matriz para mostrar los datos renderizados en
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(); // 上划加载
})
}
Pasar el análisis de parámetros:
<div class="btn-recommand" data-name="{
{name}}" data-des="{
{statement}}" data-img="{
{imageUrl}}" data-price="{
{price}}" data-gooid="{
{itemId}}">立即推荐</div>
- data-name = "{ {name}}" { {name}} se refiere al campo del objeto en la matriz de datos devuelta
- Se puede obtener mediante $ ('. Btn-recommand'). Data ('name') en el archivo js