I am currently creating a small Ratpack, Java, Groovy project. I am using Handlebars Java as my templating system.
https://github.com/jknack/handlebars.java
I am attempting to iterate over a map that has a key and then a map as a value. This is an example of my data.
[manOfTheMatches:[Forlan:20], cleanSheets:[Rooney:30]]
I want to iterate over each item in my map and then iterate over the map within each value to display for example.
"Most man of the matches Forlan with 20"
At the moment I am doing this.
{{#each mostMotm}}
<div class="col-sm-4 col-xl-3">
<div class="panel panel-tile text-center br-a br-grey">
<div class="panel-body">
<h6 class="text-success">Most {{#key}}</h6>
</div>
<div class="panel-footer br-t p12">
<span class="fs11">
<i class="fa fa-arrow-up pr5"></i>
<b>{{this}}</b>
</span>
</div>
</div>
</div>
{{/each}}
#key correctly prints out the key however 'this' just displays Forlan:20. I tried to loop over the inside map but had no luck, has anyone come across this before?
I got around this by looping over the inside map using this below.
{{#each this}}
{{this}}
{{/each}}
my code now looks like :
{{#each mostMotm}}
<div class="col-sm-4 col-xl-3">
<div class="panel panel-tile text-center br-a br-grey">
<div class="panel-body">
{{#each this}}
<h1 class="fs30 mt5 mbn">{{this}}</h1>
{{/each}}
<h6 class="text-success">Most {{#key}}</h6>
</div>
{{/each}}
Related
Can we remove the tracking urls parameters ?utm_source=wordlift&utm_medium=wl_faceted&utm_campaign=recommendations used in the related article section?
Yes, WordLift Faceted Search uses a Handlebars template.
The default template looks like this:
<script id="faceted-search-template" type="text/x-handlebars-template">
<aside class="wl-cloud-widget-wrapper wl-faceted-wrapper wordlift-cloud-widget wordlift-faceted">
<h3>{{title}}</h3>
<nav class="chips">
{{#each entities}}
<span class="chip {{activeClass}}" data-referenced-posts="{{referencedPosts}}"
data-id="{{id}}">{{label}}</span>
{{/each}}
</nav>
<section class="cards">
{{#each posts}}
<article class="card" data-post-id="{{ID}}">
<a href="{{permalink}}?utm_source=wordlift&utm_medium=wl_faceted&utm_campaign=recommendations">
{{#if thumbnail}}
<div class="thumbnail" style="background-image: url('{{thumbnail}}');"></div>
{{/if}}
<div class="card-content">
<header class="title">{{post_title}}</header>
</div>
</a>
</article>
{{/each}}
</section>
<nav class="nav-links">
<span class="nav-link previous">❮</span>
<span class="nav-link next">❯</span>
</nav>
</aside>
</script>
A developer can create a new template and embed it into the page, then set the template_id property of the wl_faceted shortcode to the id of the new template.
Hi I have this problem with HB.
This are my example arguments saved in a variables
var data = {
people: [ Katz", Johnson", Jolley"],
color:['blue','red','green'],
myClass:['first',second,'third']
}
<div class="people_list">
{{#each data}}
<div>{{people}}
{{#each color}}
<div class='{{ProblemHereMyClass}}'>{{this}}</div>
{{/each}}
</div>
{{/each}}
</div>
How to print key myClass. I try more & more time, follow several tips but no result.
Have an idea?
First use ../ to change the scope while looping. Second use lookup to pick an array item by #index.
<div class="people_list">
{{#each data.people}}
<div>{{this}}
{{#each ../data.color}}
<div class="{{lookup ../../data.myClass #index}}">{{this}}</div>
{{/each}}
</div>
{{/each}}
</div>
I'm building a small app within meteor, using the yogiben favourites package to allow users to favourite select items in a collection.
Currently the below code only shows the ID of the favourite/post, rather than the corresponding title.
How can I show the title?
<template name="favoritesSidebar">
<div class="template-favorites-sidebar">
{{#if myFavorites.count}}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "favorites"}}</h3>
</div>
<div class="panel-body">
<ul>
{{#each myFavorites collection="Posts"}}
<li>
<a>{{_id}}</a>
</li>
<li>
<a>{{_title}}</a>
</li>
<li>
<a>{{Post._title}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{/if}}
</div>
</template>
I was writing this for the express Hbs engine, but I would like to convert it to Jade. This piece of code worked on another one of my works, but I need to have it in Jade, I have problems with the handlerbars.
{{# each products}}
<div class="row">
{{#each this}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="{{this.imagePath}}" title="ImagePreview" alt="My shopping car">
<div class="caption">
<h3>{{this.title}}</h3>
<p>{{this.description}}</p>
<div class="clearfix">
<div class="price pull-left">{{this.price}}</div>
Add to car
</div>
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
Here is the pug 2 syntax:
each productRow in products
.row: each product in productRow
.col-sm-6.col-md-4: .thumbnail
img(src=product.imagePath title="ImagePreview" alt="My shopping car")
.caption
h3=product.title
p=product.description
.clearfix
.price.pull-left=product.price
a(href="#" class="btn btn-success pull-right" role="button") Add to car
Add a - before each and , between attributes for old pug versions.
I got a problem with displaying values inside "main" loop
my code looks like this:
{{# each movies}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<!--<img src="..." alt="...">-->
<div class="caption">
<h3>{{this.title}}</h3>
<p>Rating :
{{#each ../ratings}}
{{this}}
{{/each}}
</p>
<p>Genre: <b>{{this.genre}}</b></p>
<p>{{this.description}}</p>
<p>Modify Delete</p>
</div>
</div>
</div>
{{/each}}
And the problem is that I get all three values of "ratings" list inside the same block, but I want to get them separately one per each of movies. Any suggestions? Thank you in advance.
I needed to change my model and include rating field to it. So I didn't need the second each loop at all.