7

私はnode.jsとJadeが初めてです。

成功せずに解決策を検索しました（Googleで間違った質問をしたのかもしれませんが、わかりません）。

eachJadeでテーブルの行をループで作成したい。問題は、3日ごとtdに new を挿入したいということですtr。通常は非常に簡単ですが、Jade ではそれを実現できません。

私のジェイドファイル：

table
    thead
        tr
            td Header
    tbody
        each item, i in items
            if (i % 3 === 0)
            tr
                td
                    a(href="#{baseUrl}/admin.html?id=#{item.id}")

if私は自分の発言に何か問題があることを知っています。うまくいかずに多くの構成を試しました。とても簡単な問題になると確信しています。

助けてくれてありがとう！

編集

@Laurent Perrinの回答に基づいて、コードを少し変更しました。trこれで が作成され、次に 3が作成され、td次に newが作成trされるので、少し近づきます...

ニュージェイド

if (i % 3 === 0)
   tr
td: a(href="#{baseUrl}/admin.html?id=#{item.id}") dsdsd #{i}

生成された HTML

<tr></tr>
<td><a href="...">0</a></td>
<td><a href="...">1</a></td>
<td><a href="...">2</a></td>
<tr></tr>
4

3 に答える 3

8

編集:このコードはあなたが望むことをするはずですが、あまりエレガントではありません:

table
   thead
     tr: td Header
      tbody
        - for(var i = 0, nbRows = items.length/3; i < nbRows; i++) {
        tr
           if items[3*i]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i].id}")
           if items[3*i + 1]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i + 1].id}")
           if items[3*i + 2]
             td: a(href="#{baseUrl}/admin.html?id=#{items[3*i + 2].id}")
       - }

代わりにできることは、アイテムを行ごとにグループ化することで、モデルを微調整して Jade に適したものにすることです。

関数 getRows(アイテム) {
    return items.reduce(function (prev, item, i) {
        if(i % 3 === 0)
            prev.push([アイテム]);
        そうしないと
            前の[前の.長さ - 1].プッシュ(項目);

        前に戻る;
    }、[]);
}

これは次のようになります。

[{id:1},{id:2},{id:3},{id:4},{id:5}]

の中へ：

[
    [{id:1},{id:2},{id:3}],
    [{id:4},{id:5}]
]

そうすると、あなたの jade コードはずっと単純になります:

テーブル
     宣伝
         tr: td ヘッダー
     ボディ
        行の各行
            トレ
                行の各項目
                    td: a(href="#{baseUrl}/admin.html?id=#{item.id}")
于 2013-02-06T15:23:21.710 に答える
1

jade + ブートストラップの例で、4 つの要素 (列) ごとに 1 つの行があり、行は行の内側に入ります。

```

- var i = 0
- var itens_per_line = 4
each order in viewBag.orders
    - if (i % itens_per_line === 0 || i === 0) {
        .row
    - }

            .col-md-3.column
                p #{order.number}
        - i++

```

于 2015-03-23T02:18:26.907 に答える
1

これは、1 つの配列 (['1','2','3','4'] など) を行ごとに 2 つの値に変換するために行ったことです。3 に調整できます。

(ミックスインは Jade/Pug のテンプレートです)

        mixin mInput
          div.form-group.col-md-6
            p=oval

        - var valcounter = 0
        - var row = [];
        each val in JSON.parse(formvalues)
          if(valcounter % 2 === 0)
            - var col = [];
            - col.push(val)
          else
            - col.push(val)
            - row.push(col)
          - valcounter++
        each orow in row
          div.row
            each oval in orow
              +mInput
于 2016-08-04T17:59:04.077 に答える