javascriptjsrender

Creating a GRID By Column using JsRender, using Math helper functions


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.


Solution

  • 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) ... }}}