优化玉器包装

Question

我正在寻找打印从一系列对象中提取的 div。我可以通过使用下面的管道语法来实现这一点。

each i, key in faq
    if (key == 0)
        | <div class="list-group dropdown">
        |   <h6 class="list-title" data-toggle="dropdown">
        |       <strong>#{faq[key].section}</strong>
        |   </h6>
        |   <a class="list-group-item">#{faq[key].question}</a>

    else if (faq[key].section != faq[key-1].section)
        | </div>
        | <div class="list-group dropdown">
        |   <h6 class="list-title" data-toggle="dropdown">
        |       <strong>#{faq[key].section}</strong>
        |   </h6>
        |   <a class="list-group-item">#{faq[key].question}</a>

    else
        |   <a class="list-group-item">#{faq[key].question}</a>

    if (key == faq.length)
        | </div>

但是我想在没有管道语法的情况下实现这一点。我想知道这是否可能？

我基本上是在寻找这样的东西

each i, key in faq
    if (key == 0 || faq[key].section != faq[key-1].section)
        h6.list-title(data-toggle="dropdown")
            strong #{faq[key].section}
    else
            strong #{faq[key].section}

但打印出来的东西与

<div class="list-group ">
    <h6 class="list-title" data-toggle="dropdown">
        <strong>#{faq[key].section}</strong>
    </h6>
    <a class="list-group-item">#{faq[key].question}</a>
</div>
<a class="list-group-item">#{faq[key].question}</a>

当我想要它时

<div class="list-group ">
    <h6 class="list-title" data-toggle="dropdown">
        <strong>#{faq[key].section}</strong>
    </h6>
    <a class="list-group-item">#{faq[key].question}</a>
    <a class="list-group-item">#{faq[key].question}</a>
</div>

扩展...

<div class="list-group ">
    <h6 class="list-title" data-toggle="dropdown">
        <strong>Desktop FAQ</strong>
    </h6>
    <a class="list-group-item">Who licenses the fonts? The designer or the company?</a>
</div>
<div class="list-group ">
    <h6 class="list-title" data-toggle="dropdown">
        <strong>Licensing</strong>
    </h6>
    <a class="list-group-item">Who licenses the fonts?</a>
    <a class="list-group-item">Who wants to licenses the fonts?</a>
</div>
<div class="list-group ">
    <h6 class="list-title" data-toggle="dropdown">
        <strong>Installation</strong>
    </h6>
    <a class="list-group-item">Installation question 1</a>  
    <a class="list-group-item">Inst. Q 2</a>
</div>

Answer 1

首先，if-else 逻辑过于复杂且不遵循 DRY 原则。你的 if-else 只需要决定三件事：

1. 在开头包含</div>？
2. 包括中间部分？ （if (key == 0)的内容）
3. 在末尾包含</div>？ （这里的逻辑很好）

按照现在的代码，您无法完全移除管道。原因是 Jade 会自动为您处理开始和结束标签。但是，您正在尝试自己处理它，因此您需要在此处覆盖 Jade。但是，除非您有充分的理由相信标签可能不匹配，否则您不应该为此烦恼。我假设你会这样做，因为你在打扰。

好处是你只需要它们来处理你可能会遇到开始和结束标签不匹配问题的行。因此，您只需要 </div> 的行以及 <div> 的行。

---

代码应如下所示（建议为condA 和condB 使用更好的变量名称）

each i, key in faq
    - condA = (key == 0)
    - condB = (faq[key].section != faq[key-1].section)

    if (not condA and condB)
        | </div>
    if (condA or condB)
        | <div class="list-group dropdown">
        h6.list-title(data-toggle='dropdown')
            strong #{faq[key].section}
    a.list-group-item #{faq[key].question}

    if (key == faq.length)
        | </div>

您可能完全可以在没有管道的情况下完成此操作，但我不确定您到底要做什么。

---

话虽如此，听起来您当前使用的数据结构不足以完成任务。似乎您应该使用以下格式的 2D 结构：faq[topic][question#] = question。您示例中的数据结构如下所示：

faq = {
    "Desktop FAQ": {
        "1": "Who licenses the fonts? The designer or the company?"
    },
    "Licensing": {
        "1": "Who licenses the fonts?",
        "2": "Who wants to licenses the fonts?"
    },
    "Installation": {
        "1": "Installation question 1",
        "2": "Inst. Q 2"
    }
}

这里的代码带有示例faq 数据，它在online demo for Jade 中工作，faq 被压缩为一行，因为在多行上定义 JS 对象似乎在 Jade 中效果不佳（或者至少在线演示）。

- faq={"Desktop FAQ":{1:"Who licenses the fonts? The designer or the company?"},"Licensing":{1:"Who licenses the fonts?",2:"Who wants to licenses the fonts?"},"Installation":{1:"Installation question 1",2:"Inst. Q 2"}}

for questions, topic in faq
    .list-group.dropdown
        h6.list-title(data-toggle='dropdown')
            strong #{topic}
        for question in questions
            a.list-group-item #{question}