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的2D结构。示例中的数据结构如下所示：

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}

优化Jade Wrapper

1 个答案: