Создание GRID By Column с использованием JsRender с использованием вспомогательных функций Math - PullRequest
Новая
       25

Создание GRID By Column с использованием JsRender с использованием вспомогательных функций Math

0 голосов
/ 10 февраля 2020

Я пытаюсь создать такую ​​сетку.

Условия: если в результатах меньше 5 результатов, я помещу все в один столбец, если их больше 5, я должен разделить на 3, делая это, я знаю, сколько результатов в столбце я должен использовать.

У меня есть TotalNumberOfResults, этот лог c выше не работает, потому что если мы разделим 11/3 = 3,6. Как можно использовать Math.Floor на этом 3.6?

Пример: Количество результатов / 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>

Результаты неверны, потому что сортировка и конец являются десятичными.

1 Ответ

0 голосов
/ 12 февраля 2020

Вы можете использовать такие функции, как Math.floor() или Math.ceil() в шаблоне JsRender, но вам нужно получить к ним доступ через помощников (или через функции в ваших данных / View Model). Например, вы можете определить ~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) ... }}}
...