Jade 的动态手风琴不起作用答案

【问题标题】：Dynamic accordion with Jade not workingJade 的动态手风琴不起作用
【发布时间】：2015-12-17 13:55:11
【问题描述】：

我正在尝试创建一个如下所示的动态手风琴：

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}

    #collapse#{item}.panel-collapse.collapse
      .panel-body
        .col-lg-6
          // blah blah

请注意，我正在尝试根据分配的可调用窗格 ID 动态打开特定面板：

                  #collapse#{item}.panel-collapse.collapse

当我在浏览器上运行它时，我看到了这个错误：

  53|                         h4.panel-title
  54|                           a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}
> 55|                       #collapse#{item}.panel-collapse.collapse
  56|                         .panel-body
  57|                           .col-lg-6
  58|                             .my-form

  Unexpected token `interpolation` expected `text`, `code`, `:`, `newline` or `eos`
     at Parser.tag (/home/shubham/workspace/EVA2.0_bootstrap/node_modules/jade/lib/parser.js:828:15)

我错过了什么？

【问题讨论】：

标签： jquery html pug accordion jquery-ui-accordion

【解决方案1】：

这不是有效的 JADE 语法。

如果你想这样写，你必须这样做

div(id="collapse#{item}").panel-collapse.collapse

您的代码将如下所示：

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}

    div(id="collapse#{item}").panel-collapse.collapse
      .panel-body
        .col-lg-6
          // blah blah

测试：

Codepen

【讨论】：

在 Jade 中有没有更好的方法来做到这一点？我问这个是因为你说“如果你想这样写……”就好像有更好的方法一样。我刚刚开始使用 Jade，很想知道我是否可以改进。
这不是更好的方法，这是唯一的方法，因为当你说#{var}（插入一个var）时，你只会在你想把它变成一个“字符串”时插入一个var ，这是所有语言的标准。所以它把一个 var 变成了一个字符串。因此，在您的情况下，您无法返回它，因为您需要一个值而不是“字符串”。另一种写法是这样的：div(id='collapse'+item)。抱歉回复晚了！
顺便说一句：缩进不是很好，你需要每个都在#accordion.panel-group 下而不是在它旁边。因此，将其下的所有内容移至一个选项卡检查此示例以获取上述评论：codepen.io/rema/pen/XXdYVg

【解决方案2】：

我认为这是 Jade 问题，当我将 href 更改为使用 ID 链接到 div 时，它适用于我，所以在 a.accordion-toggle(data-toggle='collapse', href='#cat'+cat .key) 只需将href 更改为collapse', href='#cat'+cat.key 其中cat 是item 对象（Category 对象），类"class="panel-collapse collapse" 应该在div 内() 不在外面以正确的方式加载

div(id="cat"+cat.key class="panel-collapse collapse").in



ul.nav.nav-pills.nav-stacked
                    each cat in categories
                        ul.nav.nav-pills.nav-stacked
                        li(class='active')
                            a.accordion-toggle(data-toggle='collapse', href='#cat'+cat.key)
                                p.large.pull-right= cat.name
                                    p
                                        | <br/>
                        div(id="cat"+cat.key class="panel-collapse collapse").in
                            .panel-body
                                ul.nav.nav-pills.nav-stacked
                                if cat.subcategories.length
                                    each sub in cat.subcategories
                                        ul.nav.nav-pills.nav-stacked
                                        li(role="presentation" class='active')
                                        a.accordion-toggle(href='/blog/' +cat.key+'/'+sub.key+'/sub')
                                            p.pull-right= sub.name

【讨论】：

欢迎来到 Stack Overflow！也许解释一下你的解决方案让读者理解。