优化 Jade Wrapper

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 只需要决定三件事：

在开头包含 </div>？
包括中间部分？（if (key == 0) 的内容）
在末尾包含 </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>

你或许可以在没有管道的情况下完全做到这一点，但我不确定你到底想做什么。

话虽这么说，听起来您当前使用的数据结构不足以完成任务。似乎您应该使用格式为 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 中有效，常见问题解答被压缩到一行，因为在多行上定义 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}

优化 Jade Wrapper

Optimize Jade Wrapper

javascript

optimization

templating

node.js

pug