Ограничить результаты в Handlebars #each без использования дополнительных помощников - PullRequest
Новая
       10

Ограничить результаты в Handlebars #each без использования дополнительных помощников

0 голосов
/ 05 сентября 2018

Итак, я знаю, что смогу решить эту проблему, если бы мне удалось внедрить дополнительных помощников на руле, но это не вариант.

Мы используем стороннюю серверную систему для нашей справочной службы [ZenDesk], которая использует рули в качестве общей разметки для динамического содержимого. У меня есть раздел на главной странице нашего веб-сайта Справочного центра, в котором я хочу перечислить первые 5-6 статей с часто задаваемыми вопросами, а затем ссылку ПОДРОБНЕЕ, чтобы пользователь мог увидеть остальные статьи в этом конкретном разделе.

Из коробки они позволяют нам использовать условные ЕСЛИ и ЕСЛИ, но не сравнительные, кроме ИСТИНА или ЛОЖЬ, не больше, не меньше, не больше, не равны и т. Д. Я написал простой помощник это позволило бы это сделать, но независимо от того, где я поместил его в доступные нам шаблоны, всегда возникнет ошибка, что функция недействительна.

После обсуждения этого вопроса со службой поддержки этого приложения мне сообщили, что НЕ ПОЛЬЗОВАТЬСЯ НИКАКИМИ ПОМОЩНИКАМИ. Я должен положиться исключительно на HTML, CSS и JAVASCRIPT / JQUERY, чтобы найти решение.

Итак ... Кто-нибудь знает возможное решение о том, как я могу ограничить цикл руля #each на 5 итерациях с помощью CSS или JAVASCRIPT?

ОБНОВЛЕНИЕ: 05.09.2008:

Вот цикл #each, который я использую для раздела «Часто задаваемые вопросы» 

<h2>Frequently Asked Questions</h2>
  <section class="section faq-base">
    <section class="categories">

      <ul class="">
        {{#each categories}}
          {{#if ../has_multiple_categories}}
            <li class="">
              <a href='{{url}}' class="">
                <h4 class="blocks-item-title">{{name}}</h4>
              </a>
            </li>
          {{else}}
            {{#each sections}}
                    {{#is id //ID FOR FREQUENTLY ASKED QUESTIONS SECTION}}
                <div class="accordion homeFAQ" id="homeFAQ">
                  {{#each articles}}
                  <div class="card">
                    <div class="card-header" id="heading{{@index}}">
                      <h5 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse{{@index}}" aria-expanded="true" aria-controls="collapse{{@index}}">
                          {{title}}
                        </button>
                      </h5>
                    </div>

                    <div id="collapse{{@index}}" class="collapse" aria-labelledby="heading{{@index}}" data-parent="#homeFAQ">
                      <div class="card-body">
                        {{body}}
                      </div>
                    </div>
                  </div>
                  {{/each}}
                  <div class="card">
                    <div class="card-header">
                      <h5 class="mb-0">
                        <a href="{{url}}" class="btn btn-link collapsed">...SEE MORE</a>
                      </h5>
                    </div>
                  </div>
                </div>
                    {{/is}}

            {{/each}}
          {{/if}}
        {{/each}}
      </ul>
    </section>
  </section>

Как видно из приведенного выше кода, я вставляю FAQ в Bootstrap Accordion, а в конце - кнопка ...SEE MORE

1 Ответ

0 голосов
/ 07 сентября 2018

Не могли бы вы добавить display:none к статьям по умолчанию, затем использовать JS для подсчета количества статей на странице на основе класса (или чего-то) статей на странице, а затем снова использовать JS для удалить display:none из первых 5-6 статей? Возможно, это не самый элегантный подход, но он должен быть одним из способов достижения того, что вы ищете.

...