Правильное отображение закрывающих тегов в Handlebars

Question

Я использую Meteor и пытаюсь обойти отсутствие Handlebars @index. Я приближаюсь. Я реализовал счетчик, и несколько вспомогательных функций:

• initCounter инициализирует счетчик на 0
• incCounterMod увеличивает счетчик и применяет по модулю, чтобы каждый Х номер
• counterIs просто проверяет счетчик конкретное число X

Все это в основном, чтобы получить три элемента в строке на моем выходе. Вот пример:

{{initCounter}} 
    <div class="row-fluid"> 
    {{#each list}} 
    <span></span> 
    {{incCounterMod 3}} 
    {{#if counterIs 0}} 
     </div><div class="row-fluid"> 
    {{/if}} 
    {{/each}} 
    </div> 

Как вы можете видеть, я пытаюсь закончить одну <div> и начать другую. Я должен получить выход как:

<div class="row-fluid"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 
<div class="row-fluid"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 
... 

Проблемы в том ... Рулях или Метеор, кажется, «фиксация» или «логически соответствие» мои div блоков, реверсирования </div><div class="row-fluid"> тегов, так что мой вывод:

<div class="row-fluid"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <div class="row-fluid"></div> 
    <span></span> 
    <span></span> 
    <span></span> 
    <div class="row-fluid"></div> 
    <span></span> 
    ... 
</div> 

Своего глупого, поскольку я не просил об этом. Я пытаюсь закончить один <div> и начать с другого, а не сопоставлять их в соответствии с тем, где они появляются в исходном коде. (Примечание: консольная отладка предполагает, что все счетчики и прочее работают хорошо.)

Есть ли способ обойти это? Я думал, что Handlebars просто отображал html-текст, поскольку он идет ... Думаю, я ошибаюсь.

Спасибо.

Answer 1

Если ваша цель состоит в том, чтобы использовать три столбца для размещения большего количества элементов на странице, не может быть необходимости иметь div для каждой строки, и вы можете рассмотреть подход на основе CSS. Here is an example, как вы можете выводить свои данные как li элементов. CSS устанавливает ширину контейнера и каждый li и передает ваши данные в количество нужных столбцов. Одно из преимуществ этого подхода заключается в том, что вы можете реагировать на ваш дисплей (возможно, вам нужен только один столбец при отображении на телефоне или на боковой панели или 8 столбцов в распечатке). Это оставит вас с очень простым шаблоном:

<ol> 
    {{#each list}} 
    <li>{{value}}</li> 
    {/each} 
</ol> 

Если по какой-то причине вы хотите придерживаться div с с три span ами каждый, типичный подходом к Рулям бы структурировать ваши данные в вашем помощнике шаблона для вывода трех за раз (например, list = [[1,2,3], [4,5,6], [7,8,9]]). Пример структура может быть оказана с помощью следующего кода с использованием вложенных {{#each}} блоков:

{{#each list}} 
    <div> 
    {{#each this}} 
     <span>{{this}}</span> 
    {{/each}} 
    </div> 
{{/each}} 

Интересно, что Рули настолько самоуверенны о том, как его следует использовать, что он «фиксирует» ваш код для вас, но в большинстве случаев хорошо работает. Вышеупомянутый html должен быть легче читать и устранять неполадки. Тем не менее, это сделает ваш помощник javascript более сложным.