javascript - 条件模板

Question

我正在尝试向 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 的新手，所以我确定我遗漏了一些东西。

谁能帮我解决这个问题？

Answer 1

Dust 旨在成为一种无逻辑的模板语言，或者至少是一种逻辑性较低的模板语言。这并不意味着您的应用程序不能有逻辑，只是显示逻辑应该在您的 JSON 中提供。

使用当前的 JSON 在 Dust 中无法解决您的问题，但是如果您将 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>