修复 handlebar js 在客户端不工作
fix handlebar js not working on client side
我正在尝试使用车把模板。我在我的服务器上使用了 Express-handlebars,我想在我的客户端渲染中使用 handlebars js。
这是把手模板的脚本。
<script id="some-template" type="text/x-handlebars-template">
<div class="row">
{{#each result}}
<!-- product -->
<div class="col-md-4 col-xs-6">
<a href="/product/{{_id}}"> <div class="product">
<div class="product-img">
<img src="\{{picture}}" style="height:160px;">
<div class="product-label">
{{#if percent}}
<span class="sale">{{percent}}%</span>
{{/if}}
<span class="new">NEW</span>
</div>
</div>
<div class="product-body">
<p class="product-category">{{category}}</p>
<h3 class="product-name"><a href="/product/{{this._id}}">{{this.title}}</a></h3>
<h4 class="product-price">${{this.price}} <del class="product-old-price">${{this.discounted_price}}</del></h4>
{{#if this.averagerating}}
</div></a>
</div>
{{/each}}
</div>
</script>
对于客户端
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.js" integrity="sha256-hSzapznWRy/aOZkctlN03an9DxCLlN8ZCQS0lxntiHg=" crossorigin="anonymous"></script>
$('#mybutton').click(function(){
var post_url = $('#myform').attr("action");
var form_data = $('#myform').serialize();
// console.log(post_url, form_data);
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$('#loader').show();
$.get( post_url, form_data, function( response ) {
$("#searchresult").html("");
console.log(response);
var data = template({result:response});
console.log(data);
$("#searchresult").html(data);
//$('#loader').hide();
});
我的response
是一个数组,里面有一个对象,例如:[ {title:"Black Cap", price:60}]
。
但是没有显示在页面上!!!。我应该作为 html 发送的 data
显示如下:
:
<div class="row">
</div>
请帮忙。谢谢
你应该确保数据结构是正确的:
尝试在 JS 中使用这一行:
...
var data = template(response);
...
在把手中:
{{#each this}}
Handlebars js api,只接受一个 javascript 对象。
如果您创建一个对象,Displayhtml
将 result
数组作为字段,如下所示:
Displayhtml={
results:[ {title:"Black Cap", price:60}]
}
然后您将对象解析为 template
: template(Displayhtml)
。然后就可以了!!!
在前端(如果您也像在服务器端渲染中一样使用把手,则必须在把手中的任何助手之前添加 \
):
\{{# each results}}
\do whatever you want.
\{{/each}}
我正在尝试使用车把模板。我在我的服务器上使用了 Express-handlebars,我想在我的客户端渲染中使用 handlebars js。
这是把手模板的脚本。
<script id="some-template" type="text/x-handlebars-template">
<div class="row">
{{#each result}}
<!-- product -->
<div class="col-md-4 col-xs-6">
<a href="/product/{{_id}}"> <div class="product">
<div class="product-img">
<img src="\{{picture}}" style="height:160px;">
<div class="product-label">
{{#if percent}}
<span class="sale">{{percent}}%</span>
{{/if}}
<span class="new">NEW</span>
</div>
</div>
<div class="product-body">
<p class="product-category">{{category}}</p>
<h3 class="product-name"><a href="/product/{{this._id}}">{{this.title}}</a></h3>
<h4 class="product-price">${{this.price}} <del class="product-old-price">${{this.discounted_price}}</del></h4>
{{#if this.averagerating}}
</div></a>
</div>
{{/each}}
</div>
</script>
对于客户端
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.js" integrity="sha256-hSzapznWRy/aOZkctlN03an9DxCLlN8ZCQS0lxntiHg=" crossorigin="anonymous"></script>
$('#mybutton').click(function(){
var post_url = $('#myform').attr("action");
var form_data = $('#myform').serialize();
// console.log(post_url, form_data);
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$('#loader').show();
$.get( post_url, form_data, function( response ) {
$("#searchresult").html("");
console.log(response);
var data = template({result:response});
console.log(data);
$("#searchresult").html(data);
//$('#loader').hide();
});
我的response
是一个数组,里面有一个对象,例如:[ {title:"Black Cap", price:60}]
。
但是没有显示在页面上!!!。我应该作为 html 发送的 data
显示如下:
:
<div class="row">
</div>
请帮忙。谢谢
你应该确保数据结构是正确的:
尝试在 JS 中使用这一行:
...
var data = template(response);
...
在把手中:
{{#each this}}
Handlebars js api,只接受一个 javascript 对象。
如果您创建一个对象,Displayhtml
将 result
数组作为字段,如下所示:
Displayhtml={
results:[ {title:"Black Cap", price:60}]
}
然后您将对象解析为 template
: template(Displayhtml)
。然后就可以了!!!
在前端(如果您也像在服务器端渲染中一样使用把手,则必须在把手中的任何助手之前添加 \
):
\{{# each results}}
\do whatever you want.
\{{/each}}