无法使用车把正确在我的“模板”中显示变量.js
Cannot get vars displayed in my 'template' using Handlebars.js correctly
我有一个 Handlebars 脚本,我正在尝试将一个对象迭代到下面的"模板"。即使我可以在对象中看到"badNodes"(当我做控制台时是一个对象.log(行(,它也不会传递到模板,我看到的只是视图/模板中地址旁边的空白条目。
谁能建议我可能做错了什么 - 附言我是车把的新手.js
<script class="template" type="text/html">
<div class="badNodesContainer">
{{#row}}
<div class="hash{{badNodes.hash}} help-tip">
<p>
<strong>Address: </strong>{{badNodes.address}}</br>
</p>
</div>
{{/row}}
</div>
</script>
Ajax 请求的后半部分
.done(function (data, result, jqXHR) {
var checkinData = JSON.parse(data).data;
var rows = [];
//_.templateSettings.variable = "badNode";
var source = $("script.template").html();
var template = Handlebars.compile(source);
$.each(checkinData, function (index, row) {
row.badNodesHTML = "";
var AB_action_login = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://asite.com/app/login.php?username=' + row.user + '&hash=' + row.signature + '"><i class="fa fa-external-link"></i> App</a>';
if (row.postid == null) {
var AB_action_order = '<a class="btn btn-default btn-sm hidden" disabled="disabled" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
} else {
var AB_action_order = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
}
row.AB_login = AB_action_login;
row.AB_order = AB_action_order;
row.AB_actions = AB_action_login + AB_action_order;
if (row.badNodes.length) {
$.each(row.badNodes, function (idx, badNode) {
badNode.address.toString()
badNode.address = /:(.+)/.exec(badNode.address)[1];
row.badNodesHTML += template(badNode);
row.AB_actions;
});
}
}
);
您
正在通过模板中的#row
访问对象,即使您传递到模板中的对象如下所示:
{
hash: 'some hash',
address: 'some address'
}
因此,为了绑定它,请尝试通过密钥访问它,如下所示:
<script class="template" type="text/html">
<div class="badNodesContainer">
<div class="hash{{hash}} help-tip">
<p>
<strong>Address: </strong>{{address}}</br>
</p>
</div>
</div>
</script>
此外,假设badNodes
是坏节点数组,则在将row
直接传递给模板时,可以在声明中使用each
。试试这个:
<script class="template" type="text/html">
<div class="badNodesContainer">
{{#each badNodes}}
<div class="hash{{hash}} help-tip">
<p>
<strong>Address: </strong>{{address}}</br>
</p>
</div>
{{/each}}
</div>
</script>
我建议你准备一个具有你想要的确切形状和形式的javascript对象,然后将其传递给模板。您正在$.each
循环中格式化输出,并单独传递每一行,从组织的角度来看,这可能会变得混乱。此外,您正在JavaScript中为按钮创建html,您也可以将其放入模板中。然后,您所要做的就是将一个row
对象传递给具有所有必需信息的模板。
重构后的版本可能如下所示:
<style media="screen">
.btn-zabs {
width:70px;
text-align:left;
}
</style>
<script type="text/javascript">
.done(function (data, result, jqXHR) {
var checkinData = JSON.parse(data).data;
var rows = [];
var source = $("script.template").html();
var template = Handlebars.compile(source);
var $container = $("#parent-of-badNodesContainer");
$.each(checkinData, function (index, row) {
if (row.badNodes.length) {
$.each(row.badNodes, function (idx, badNode) {
badNode.address.toString()
badNode.address = /:(.+)/.exec(badNode.address)[1];
});
}
});
$container.html(template(checkinData));
});
</script>
<script class="template" type="text/html">
<a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
<div class="badNodesContainer">
{{#each badNodes}}
<div class="hash{{hash}} help-tip">
<p>
<strong>Address: </strong>{{address}}</br>
</p>
</div>
{{/each}}
</div>
{{#if postid}}
<a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
{{else}}
<a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
{{/if}}
</script>
请注意,我将按钮模板放在任意位置。我相信你会想重新组织它们所属的地方。这仅用于演示。
相关文章:
- angularjs+rails应用程序中未显示模板
- AngularJs的动态模板显示具有相同的路线
- 在模板angular 2中显示JSON对象
- 如何使用Razor显示模板将字符串转换为html字符串
- 图像没有't编辑模板metro.js后显示
- Select2-使用自定义模板时不显示占位符
- 下划线模板不是不显示弹出框功能
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 车把模板不显示数据
- 在玉石模板中显示Mongodb收藏
- 无法在 ng 重复中显示 ng 模板
- 在angularjs中显示/隐藏模板URL
- Angular 2 和 Laravel 5.2 - 显示不同的刀片模板
- HTML5 模板上未显示的希伯来字符
- 如何在Meteor中使用两个按时间排序的不同模板显示两个不同的集合
- 将组页脚模板显示为剑道网格的整个页脚行
- 如何使用js模板显示图像
- 无法使用车把.js模板显示日期时间
- 模板显示Gmail API JSON输出在HTML中
- 在Express.js中,如何使模板显示flash消息