使用 JsRender 按列创建 GRID，使用数学辅助函数答案

【问题标题】：Creating a GRID By Column using JsRender, using Math helper functions使用 JsRender 按列创建 GRID，使用数学辅助函数
【发布时间】：2020-05-26 04:19:25
【问题描述】：

我正在尝试创建这样的网格。

条件：如果结果少于 5 个结果，我会将所有内容放在同一列上，如果超过 5 个，我必须除以 3，这样我就知道每列我必须使用多少个结果。

我有 TotalNumberOfResults，上面的这个逻辑不起作用，因为如果我们除以 11/3 = 3.6。尽可能在这个 3.6 上使用 Math.Floor？

Ex: Number of Results / 3 得到每列有多少。

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

我做到了：

<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>

结果错误，因为排序和结尾都是小数。

【问题讨论】：

标签： javascript jsrender

【解决方案1】：

您可以在 JsRender 模板中使用 Math.floor() 或 Math.ceil() 等函数，但您需要通过 helpers（或通过数据/视图模型中的函数）访问它们。例如，您可以定义一个~colcount() 助手：

colcount: function(val){
  return Math.ceil(val.length/3);
}

您可以作为

访问

{{for Results start=~colcount(Results) end=~colcount(Results)*2}}

所以这样的东西应该呈现你的三列网格视图：

<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>

或者，您甚至可以将 Math 对象本身作为助手传递，如下所示：

var helpers = {
  math: Math,
  ...
};

var html = myTmpl(data, helpers);

然后直接在模板表达式中使用它，例如“

{{for start=~math.ceil(Results.length/3) ... }}}

【讨论】：