I'm trying to create a grid like that.
Conditions: If the Results are less than 5 results, i will put everything on the same column, if have more than 5 I have to divided by 3, so doing that i know how many results per column i have to use.
I have the TotalNumberOfResults, this logic above its not working because if we divide 11/3 = 3.6. As any possible to use Math.Floor on this 3.6?
Ex: Number of Results / 3 to get how many per column.
Number 1 Number 6 Number 11
Number 2 Number 7 Number 12
Number 3 Number 8 Number 13
Number 4 Number 9
Number 5 Number 10
I did that:
<div class="row" id="resultsAZSelector" style="display:none">
<div class="col-md-4">
<div class="letters-list">
<ul>
{{for Results start=0 end=TotalNumberOfResults/3}}
{{for Fields}}
{{if Key == 'item_name_s'}}
<li><a>{{:Value}}</a></li>
{{/if}}
{{/for}}
{{/for}}
</ul>
</div>
</div>
<div class="col-md-4">
<div class="letters-list">
<ul>
{{for Results start=(TotalNumberOfResults/3)+1 end=(TotalNumberOfResults/3)*2}}
{{for Fields}}
{{if Key == 'item_name_s'}}
<li><a>{{:Value}}</a></li>
{{/if}}
{{/for}}
{{/for}}
</ul>
</div>
</div>
<div class="col-md-4">
<div class="letters-list">
<ul>
{{for Results start=((TotalNumberOfResults/3)*2)+1 end=TotalNumberOfResults}}
{{for Fields}}
{{if Key == 'item_name_s'}}
<li><a>{{:Value}}</a></li>
{{/if}}
{{/for}}
{{/for}}
</ul>
</div>
</div>
</div>
Results are wrong because the sort and end are decimal.
You can use functions such as Math.floor()
or Math.ceil()
within a JsRender template, but you need to access them via helpers (or via functions within your data/View Model). For example you can define a ~colcount()
helper:
colcount: function(val){
return Math.ceil(val.length/3);
}
which you could access as
{{for Results start=~colcount(Results) end=~colcount(Results)*2}}
So something like this should render your three column grid view:
<ul>
{{for Results start=0 end=~colcount(Results)}}
<li>{{:}}</li>
{{/for}}
</ul>
<ul>
{{for Results start=~colcount(Results) end=~colcount(Results)*2}}
<li>{{:}}</li>
{{/for}}
</ul>
<ul>
{{for Results start=~colcount(Results)*2 end=Results.length}}
<li>{{:}}</li>
{{/for}}
</ul>
Alternatively you could even pass in the Math object itself as a helper, as in:
var helpers = {
math: Math,
...
};
var html = myTmpl(data, helpers);
and then use it directly within template expressions such as"
{{for start=~math.ceil(Results.length/3) ... }}}