使用 Handlebars 访问数组中所有对象的特定元素时出现问题
Problem accessing specific elements of all objects in an array using Handlebars
我对 Handlebars 比较陌生,所以这可能是我遗漏的一些简单的东西,但我似乎无法输出数组中每个对象的特定元素。我搜索了多篇文章并阅读了 handlebars 文档,但到目前为止还没有找到解决方案。基本上我试图输出一系列时间段的可用性及其分配给一个项目的状态。这是我的代码...
数据
Pitch: {
"name": "test",
"price": 11,
"city": "testCity",
"availability": [
{
"status": "reserved",
"dt": "2018-11-16T20:00:00Z"
},
{
"status": "available",
"dt": "2018-11-16T19:00:00Z"
}
]
}
index.js
router.get('/availability/:id', function(req, res, next) {
Pitch.findById(req.params.id, function (err, docs){
var indPitch = [];
indPitch.push(docs);
res.render('pitch/availability', { title: 'Availability', indPitch: indPitch });
});
availability.hbs
{{#each indPitch}}
<h3><a href="/availability/{{ id }}">{{ name }}</a></h3>
<p class = "description">{{ city }}</p>
{{#each availability}}
{{status}}
{{dt}}
{{/each}}
<p class = "description">Price per hour : €{{ price }}</p>
<a href="/reserve/{{id}}" class="btn btn-primary pull-right" role="button">Select</a>
{{/each}}
使用上面的 handlebars 代码,只有城市和价格输出到屏幕。如果我将 {{#each availability}} 更改为 {{#each this}} 然后以 {{availability.[0].status}} 或 {{availability.[1].dt}} 等访问对象。然后我可以将该项目输出到屏幕。
但是,我需要做的是遍历 'Availability' 并显示所有 date/times 及其状态。任何想法我做错了什么?如果您需要更多信息,请告诉我。
只需在每个应该起作用的元素之前使用它
{{#each indPitch}}
<h3><a href="/availability/{{ id }}">{{this.name }}</a></h3>
<p class = "description">{{ this.city }}</p>
{{#each availability}}
{{this.status}}
{{this.dt}}
{{/each}}
<p class = "description">Price per hour : €{{ this.price }}</p>
<a href="/reserve/{{this.id}}" class="btn btn-primary pull-right" role="button">Select</a>
{{/每个}}
好的,在尝试了#each this 和#each availability 的每种组合几个小时后,最终一个成功了。在这里发布答案以防其他人遇到同样的问题...
我必须将 {{#each availabilty}} 嵌套在 {{#each this}} 中,如下所示...
{{#each indPitch}}
<h3><a href="/availability/{{ id }}">{{this.name }}</a></h3>
<p class = "description">{{ this.city }}</p>
{{#each this}}
{{#each availability}}
{{status}}
{{dt}}
{{/each}}
{{/each}}
<p class = "description">Price per hour : €{{ this.price }}</p>
<a href="/reserve/{{this.id}}" class="btn btn-primary pull-right" role="button">Select</a>
{{/each}}
我对 Handlebars 比较陌生,所以这可能是我遗漏的一些简单的东西,但我似乎无法输出数组中每个对象的特定元素。我搜索了多篇文章并阅读了 handlebars 文档,但到目前为止还没有找到解决方案。基本上我试图输出一系列时间段的可用性及其分配给一个项目的状态。这是我的代码...
数据
Pitch: {
"name": "test",
"price": 11,
"city": "testCity",
"availability": [
{
"status": "reserved",
"dt": "2018-11-16T20:00:00Z"
},
{
"status": "available",
"dt": "2018-11-16T19:00:00Z"
}
]
}
index.js
router.get('/availability/:id', function(req, res, next) {
Pitch.findById(req.params.id, function (err, docs){
var indPitch = [];
indPitch.push(docs);
res.render('pitch/availability', { title: 'Availability', indPitch: indPitch });
});
availability.hbs
{{#each indPitch}}
<h3><a href="/availability/{{ id }}">{{ name }}</a></h3>
<p class = "description">{{ city }}</p>
{{#each availability}}
{{status}}
{{dt}}
{{/each}}
<p class = "description">Price per hour : €{{ price }}</p>
<a href="/reserve/{{id}}" class="btn btn-primary pull-right" role="button">Select</a>
{{/each}}
使用上面的 handlebars 代码,只有城市和价格输出到屏幕。如果我将 {{#each availability}} 更改为 {{#each this}} 然后以 {{availability.[0].status}} 或 {{availability.[1].dt}} 等访问对象。然后我可以将该项目输出到屏幕。
但是,我需要做的是遍历 'Availability' 并显示所有 date/times 及其状态。任何想法我做错了什么?如果您需要更多信息,请告诉我。
只需在每个应该起作用的元素之前使用它
{{#each indPitch}}
<h3><a href="/availability/{{ id }}">{{this.name }}</a></h3>
<p class = "description">{{ this.city }}</p>
{{#each availability}}
{{this.status}}
{{this.dt}}
{{/each}}
<p class = "description">Price per hour : €{{ this.price }}</p>
<a href="/reserve/{{this.id}}" class="btn btn-primary pull-right" role="button">Select</a>
{{/每个}}
好的,在尝试了#each this 和#each availability 的每种组合几个小时后,最终一个成功了。在这里发布答案以防其他人遇到同样的问题...
我必须将 {{#each availabilty}} 嵌套在 {{#each this}} 中,如下所示...
{{#each indPitch}}
<h3><a href="/availability/{{ id }}">{{this.name }}</a></h3>
<p class = "description">{{ this.city }}</p>
{{#each this}}
{{#each availability}}
{{status}}
{{dt}}
{{/each}}
{{/each}}
<p class = "description">Price per hour : €{{ this.price }}</p>
<a href="/reserve/{{this.id}}" class="btn btn-primary pull-right" role="button">Select</a>
{{/each}}