使用 JsRender 创建按列排列的网格,使用数学辅助函数
Creating a GRID By Column using JsRender, using Math helper functions
我正在尝试创建这样的网格。
条件:如果结果少于 5 个结果,我会将所有结果放在同一列,如果超过 5 个我必须除以 3,这样做我知道每列我必须有多少个结果使用.
我有 TotalNumberOfResults,上面的这个逻辑不起作用,因为如果我们除以 11/3 = 3.6。尽可能在这个 3.6 上使用 Math.Floor?
例如:结果数 / 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>
结果错误,因为排序和结尾是小数。
您可以在 JsRender 模板中使用 Math.floor()
或 Math.ceil()
等函数,但您需要通过 helpers(或通过 data/View 中的函数访问它们模型)。例如,您可以定义一个 ~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) ... }}}
我正在尝试创建这样的网格。
条件:如果结果少于 5 个结果,我会将所有结果放在同一列,如果超过 5 个我必须除以 3,这样做我知道每列我必须有多少个结果使用.
我有 TotalNumberOfResults,上面的这个逻辑不起作用,因为如果我们除以 11/3 = 3.6。尽可能在这个 3.6 上使用 Math.Floor?
例如:结果数 / 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>
结果错误,因为排序和结尾是小数。
您可以在 JsRender 模板中使用 Math.floor()
或 Math.ceil()
等函数,但您需要通过 helpers(或通过 data/View 中的函数访问它们模型)。例如,您可以定义一个 ~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) ... }}}