I have a simple pagination. What I want to do is adding class "active" to active tab (I am on page 8 so button 8 has "active" class)
But it still won't work.
I tried two things but both unsuccessful.
First this:
{{#each pagination}}
{{#if pagHelper}}
<a>{{this.number}}</a>
{{else}}
<li class="paginator-item {{#is this.number current}}active{{/is}}">
{{this.number}}
</li>
{{/if}}
{{/each}}
Second like this:
{{#is this.number current}}{}
{{#each pagination}}
{{#if pagHelper}}
<a>{{this.number}}</a>
{{else}}
<li class="paginator-item ">
{{this.number}}
</li>
{{/if}}
{{/each}}
{{else}}
{{#each pagination}}
{{#if pagHelper}}
<a>{{this.number}}</a>
{{else}}
<li class="paginator-item ">
{{this.number}}
</li>
{{/if}}
{{/each}}
{{/is}}
Basically, I am comparing the current page number and the page number of the button. I tried to log both "current" and "this number" and both gave me correct value. The problem is that when I use "current" in "each" loop it gives me nothing. I will be thankfull for any idea.
I just needed to add ../ to current
{{#is this.number current}}active{{/is}}
to
{{#is this.number ../current}}active{{/is}}
Related
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 have a basical layout with a sidebar. I want to hide the sidebar when I am on /users/profile. How can I do it using the if helper? Is there a way to get the current file name?
Here is the code:
<div class="wrapper">
{{#if user}}
<nav id="sidebar">
<div class="sidebar-header">
<h3>Options</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<h1>
Home
</h1>
</li>
<li>
<h1>
Chat
</h1>
</li>
<li>
<h1>
About us
</h1>
</li>
</ul>
</nav>
{{else}}
{{/if}}
With the current code if a user is logged in the sidebar is showed , otherwise it is hidden. I want the same behaviour also if I am on users/profile.
Your routing is handled by Node.js. Somewhere in your Node.js you probably have instructions on what to do when the user opens /users/chatlist or /users/search, e.g. you select which template to render. Once you know the request is for route /users/profile, you use a JSON payload for your handlebars to properly render the page. You can customize that payload as you wish, including adding some helper fields. For example it may look like:
{
user: { ... },
sidebar: {
visible: false
}
}
Then inside your template, you may use it for a conditional check, like:
{{#if sidebar.visible}}
<nav id="sidebar">
...
</nav>
{{/if}}
I am trying to exclude certain products with a specific tag. I was able to exclude products using {% unless result.tags contains 'wholesale' %} on the search page, but having trouble with the search header. The template I have been modifying is using the raw tag. Anyone got any suggestions?
{% raw %}
{{#if has_results}}
<ul class="header-search__products grid">
{{#each results}}
<li class="grid__cell 1/3--handheld-and-up 1/4--desk">
<div class="product-item product-item--push">
{{#if on_sale}}
<div class="product-item__labels labels"><span class="label label--on-sale">{{#root.on_sale_label}}</span></div>
{{/if}}
<figure class="product-item__image-container">
<a href="{{url}}" class="product-item__link">
<img class="product-item__image " src="{{image}}" alt="{{image_alt}}">
</a>
</figure>
<div class="product-item__info">
<h3 class="product-item__title">
{{title}}
</h3>
{{#if on_sale#}}
<span class="product-item__price product-item__price--new" data-money-convertible>{{price}}</span>
<span class="product-item__price product-item__price--old" data-money-convertible>{{compare_at_price}}</span>
{{else}}
<span class="product-item__price product-item__price--new" data-money-convertible>{{price}}</span>
{{/if}}
</div>
</div>
</li>
{{/each}}
</ul>
{{results_label}}
{{else}}
<p class="header-search__no-results h4">{{results_label}}</p>
{{/if}}
{% endraw %}
Thankfully, it’s pretty easy to hide a product from your shop’s search. It involves adding some custom metadata.
This is the data you want to add:
"namespace" : "seo"
"key" : "hidden"
"value" : 1
"value_type" : "integer"
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}}
I have a nested each helper inside an each helper. i want to accsess a variable from the outer each helper inside the inner each helper. code bellow
{{#each this=outer}}
<li>
{{each this.values}}
<input type='radio' value='{{this}}' data-id='{{outer.id}}'>
{{/each}}
</li>
{{/each}}
the above syntax does not work
You can use a parent context using ../ inside the variable.
I'm not sure how your data is structured but your template should probably look something like this:
{{#each outer}}
<li>
{{each outer.values}}
<input type='radio' value='{{this}}' data-id='{{../outer.id}}'>
{{/each}}
</li>
{{/each}}
Check out this github issue for more.