使用 Jade 动态填充 bootstrap 旋转木马。迭代的一些问题

Question

我正在尝试使用 jade 创建一个 boostrap 轮播以动态迭代对象列表并将它们显示在轮播中。

我的第一个问题显然是这可能吗。
其次，我将如何完成它。

这是我的代码片段，我在其中尝试生成包含数据幻灯片到我的旋转木马元素的列表：

10 - var n = 0
11   while n < newsarticles.length
12       if n == 0
13           li.active(data-target="#header-carousel",data-slide-to="n++")  
14       else
15          li(data-target="#header-carousel",data-slide-to="n++")

我知道这是错误的代码，但我失败了，如果可能的话，我正在寻找有关如何完成此操作的参考。

它抛出的错误是

"unexpected text " pointing to line 13

如有任何建议，我们将不胜感激。感谢您提前抽出时间，如果我能提供更多有用的信息，请告诉我。

这是我的动态轮播代码的完整工作示例：

    extends layout

    block content
        div.container
            #header-carousel.carousel.slide(data-ride="carousel",data-interval="4000")
                ol.carousel-indicators
                    -var n = 0
                        while n < newsarticles.length
                            if n == 0
                                li.active(data-target="#header-carousel",data-slide-to=n)
                                - n++   
                            else
                                li(data-target="#header-carousel",data-slide-to=n)
                                - n++
                .carousel-inner
                    -var i = 0
                    - for newsarticle in newsarticles
                        if i == 0
                            .item.active
                                img(src='#{newsarticle.imgurl}')
                                .carousel-caption #{newsarticle.articletitle}
                            -i++
                        else
                            .item
                                img(src='#{newsarticle.imgurl}')
                                .carousel-caption #{newsarticle.articletitle}
                            -i++

                a.left.carousel-control(href="#header-carousel", data-slide="prev")
                    span.icon-prev
                a.right.carousel-control(href="#header-carousel", data-slide="next")
                    span.icon-next

此代码关联的数据如下：

    newsarticle = 
    {  
      articletitle: String,
      bodytext: String,
      editedon: { type: Date, default: Date.now },
      imgurl: String
    });

Answer 1

我想问题是您在引号中有 n++ 增量值的字符串。

我想你可以为它使用一个变量，然后将它分配给数据属性。

Answer 2

嘿，我找到了一个可行的解决方案。谢谢大家来看。我实现我想要做的事情的方法是使用@Jai 的建议以及我自己的一些外部思考。问题肯定是 n++ 周围的“”，但它也试图增加数据滑动到元素内部的变量 n。如果你删除它周围的引号，然后单独增加变量 n 它就可以正常工作。这是代码的工作版本。此外，如果这不是最佳行业实践并且有更好的方法来实现这一点，我愿意接受更多解决方案。

    -var n = 0
            while n < newsarticles.length
                if n == 0
                    li.active(data-target="#header-carousel",data-slide-to=n)
                        - n++   
                else
                    li(data-target="#header-carousel",data-slide-to=n)
                        - n++

使用 Jade 动态填充 bootstrap 旋转木马。迭代的一些问题

Use Jade to dynamically fill a bootstrap caraousel. Some issues on iteration

twitter-bootstrap-3

pug