Условные шаблоны

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

У меня есть код Json, который выглядит следующим образом:

{
    "names": [{
        "name": "User 1",
        "isSir": true
    }, {
        "name": "User 2",
        "isSir": true
    }, {
        "name": "User 3",
        "isSir": true
    }, {
        "name": "User 4",
        "isSir": false
    }, {
        "name": "User 5",
        "isSir": false
    }, {
        "name": "User 6",
        "isSir": false
    }]
}

Затем я хочу пройти через это и отобразить только первый элемент для каждого варианта «isSir». Остальные элементы будут скрыты с помощью CSS, поэтому я должен получить что-то вроде:

  • Пользователь 1 (отображается)
  • Пользователь 2 (скрыт)
  • Пользователь 3 (скрыт)
  • Пользователь 4 (отображается)
  • Пользователь 5 (скрыт)
  • Пользователь 6 (скрыт)

Я пытался использовать варианты {@if cond, чтобы сначала захватить только тех, кто "Sir", а затем остальных, но поскольку мне также нужно вести подсчет, чтобы я знал, где я нахожусь в цикле, я быстро перешел к попытке использовать {@select key= .

Я новичок в Dust, поэтому я уверен, что что-то упускаю.

Может ли кто-нибудь помочь мне в этом?


javascript json dust.js
person Marcos Placona    schedule 21.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Dust задумывался как нелогичный язык шаблонов или, по крайней мере, менее логический язык шаблонов. Это не означает, что ваше приложение не может иметь логику, но только то, что логика отображения должна быть предоставлена ​​​​в вашем JSON.

Решение вашей проблемы невозможно в Dust с вашим текущим JSON, но если вы измените свой JSON на:

{
    "names": [{
        "name": "User 1",
        "isSir": true,
        "isHidden": false
    }, {
        "name": "User 2",
        "isSir": true,
        "isHidden": true
    }, {
        "name": "User 3",
        "isSir": true,
        "isHidden": true
    }, {
        "name": "User 4",
        "isSir": false,
        "isHidden": false
    }, {
        "name": "User 5",
        "isSir": false,
        "isHidden": true
    }, {
        "name": "User 6",
        "isSir": false,
        "isHidden": true
    }]
}

Затем вы можете использовать такой шаблон:

<ul>
{#names}
  <li{?isHidden} class="hidden"{/isHidden}>
    {?isSir}Sir {/isSir}{name}
  </li>
{/names}
</ul>
person smfoote    schedule 21.12.2012