Trying to check to see if an iteration is divisible by a number, and wrap it in a <div> if it is, but I can't seem to get it to work. Is there even a way to do this with Dust?
{#sitemap.items}
{#if cond="$idx % 2"}
<div class="row">
{/if}
<div class="sitemap-column col-6">
{#.}
//do stuff with the object
{/.}
</div>
{#if cond="sitemap.count % 2"}
</div>
{/if}
{/sitemap.items}
The easiest way is to use the math helper like this:
{#items}
{#math key=$idx method="mod" operand=2}
{#eq value=0}<div class="row">{/eq}
{/math}
{/items}
Related
My problem is with using thymeleaf iteration and if-else condition together.
Suppose i have 100 products in my mysql database i want to show them on a webpage using cards and there are only 4 cards in a row(I am able to print them in a row), but i want to change the row after every 4 iteration(0-3),so that new four cards will be shown in next row.
My thymeleaf Template Page:-
<div class="container" >
<div class="row">
<div class="col-xl-3" th:each="products : ${ListOfProducts}">
<div class="card" style="width: 15rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-title" th:text = "${products.productName}"></p>
<hr>
<p class="card-text" th:text = "${products.productCost}"></p>
AddToCard
</div>
</div>
</div>
</div>
I know we can do it using loops and if-condition but i am new to thymeleaf syntax, so please help me to get out of this rid.
Thanks in advance,Your words are value for me.
Previously to create Accordion controls I used to use this piece of code:
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
or as seen here: Bootplay Live Demo
Now I still want to use my example but in this page I have a for-each loop so I need to create these at run-time.
The items I need to put variables there in order for this to work are
id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"
How can I initialize those in a for-each loop a mode using Razor?
Imagine you have whatever property you like to do it in the model.
The biggest issue you are/will likely run into is Razor parsing. When you try to use a Razor variable in the middle of some bit of text, often Razor cannot determine where the variable name ends. For example, if you were to do something like:
<div id="accordion#Model.IdMessageSetup">
Razor thinks it needs to look for a property on the model named IdMessageSetup, when actually, you just wanted Id. The easiest way to fix this is to wrap the variable in paranthesis:
<div id="accordion#(Model.Id)MessageSetup">
Now, it's clear which part is the variable. As far as adding the # sign goes, I'm not really sure what the confusion is there. You just put it where it needs to go:
<a href="#collapse#(Model.Id)MessagesSetup">
Nothing special required.
How to combine sec:authorize and th:if in thymeleaf?
<div class="form-group" sec:authorize="hasRole('ADMIN')" th:if="${myObjct.name!=null}"></div>
basically i need to combine sec:authorize="hasRole('ADMIN')" and th:if="${myObjct.name!=null}" and the above code doesn't work as i am expecting how to combine these two conditions in thymeleaf?
Just try:
<div class="form-group" th:if="${#authorization.expression('hasRole(''ADMIN'')')}"></div>
src: https://github.com/thymeleaf/thymeleaf-extras-springsecurity
I was able to get this working with the below code.
<sec:authorize access="hasRole('ADMIN')" var="isAdmin"></sec:authorize>
<div class="form-group" th:if="${'ADMIN'.equals(isAdmin) and myObjct.name!=null}"></div>
This code could work here:
<div class="form-group" sec:authorize="isAuthenticated()" th:if="${myObjct.name!=null} and ${#authorization.expression('hasRole(''ADMIN'')')}">
I have a nested smarty foreach loop.
I am trying to get sequentially numbered output on the divs ( see example )
Using the key or index or .iteration on the inner array doesn't work the way I want.
I can see what's happening, but I want some way of keeping an overall running count, rather than a partial count, that keeps resetting on every branch of the outer loop.
I have tried numerous things without success.
Can anyone help ? Much appreciated.
{foreach from=$children item='child'}
{if $child.show_in_menu}
{* loop through grandchildren *}
{foreach from=$child item='grandchild' name='grandchildrenpages' key=k}
{if $grandchild.show_in_menu}
<div class="view-{$k}"></div>
{/if}
{/if}
{/foreach}
{/if}
{/foreach}
Desired output
<div class="view-1"></div>
<div class="view-2"></div>
<div class="view-3"></div>
<div class="view-4"></div>
<div class="view-5"></div>
<div class="view-6"></div>
<div class="view-7"></div>
<div class="view-8"></div>
Currentoutput
<div class="view-0"></div>
<div class="view-1"></div>
<div class="view-2"></div>
<div class="view-1"></div>
<div class="view-2"></div>
<div class="view-5"></div>
<div class="view-6"></div>
<div class="view-7"></div>
Use {counter}:
{foreach from=$children item='child'}
{if $child.show_in_menu}
{foreach from=$child item='grandchild' name='grandchildrenpages' key=k}
{if $grandchild.show_in_menu}
<div class="view-{counter}"></div>
{/if}
{/foreach}
{/if}
{/foreach}
(btw, your example has one {/if} more than needed, I guess it's a typo
I have a list of products and I want to show an ad in the product feed.
I want something like:
<div id="container">
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
</div>
<div id="add">
Adsense Stuff
</div>
<div id="container">
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
</div>
In ERB, I would have:
<div id="container">
<% productes.each_with_index do |product,index| %>
<div id="product"><%= product %></div>
<% if index == 2 %>
</div>
<div id="add">
Adsense Stuff
</div>
<div id="container">
<% end %>
<% end %>
</div>
How you translate this to Haml or Slim?
I don't want to break the loop in two loops for two reasons: I don't know the products count by page and I have some more elaborate code which uses the same HTML tricks with the Rails cycle() helper. So, it will help me a lot to find a trick to make it possible.
Haml lets you write raw HTML as output when you want it. Although weird, you can use this to achieve your goals here, as you did with Erb:
TEMPLATE = '
.container
- products.each_with_index do |product,index|
- if index == 2
</div>
<div class="ad">AdSense Stuff</div>
<div class="container">
.product<
= product
'
require 'haml'
products = %w[ cat box kitten shoes hounds ]
puts Haml::Engine.new(TEMPLATE).render binding
#=> <div class='container'>
#=> <div class='product'>cat</div>
#=> <div class='product'>box</div>
#=> </div>
#=> <div class="ad">AdSense Stuff</div>
#=> <div class="container">
#=> <div class='product'>kitten</div>
#=> <div class='product'>shoes</div>
#=> <div class='product'>hounds</div>
#=> </div>
The indentation looks weird, but you can see that you have two containers with the AdSense stuff outside either.
In HAML
-products.each_with_index do |product,index|
.product= product
-if index == 2
.ad= Adsense Stuff
I wouldn't bother with the container, just set up the css to deal with the product and ad classes. (Which also brings up the fact that you have multiple ids of the same name, these should be changed to classes).
- products.each_with_index do |product,index|
.product
= product
- if index == 2
.ad= Adsense Stuff
This should do it?
A possible Haml solution, using the surround helper:
.container
-products.each_with_index do |product,index|
.product=product
-if index == 2
=surround "</div>", "<div class='container'>" do
.add
Adsense stuff
This is a bit of a hack, in that we're "faking" closing and opening the container div; as far as Haml knows we're still in it. For this reason it also introduces a bit of repetition in that you have to specify the "container" class (and any other attributes that div might have) in two places.
This solution is similar to #Phrogz's solution but this is a bit more "Haml-ly" and allows you to use Haml syntax to define the add div.