javascript - 优化 Jade 包装

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}