生成额外的缩进以使元素成为外部块的子元素

Question

我的数据是一个排序数组：

data = [ "Aa", "Abc", "Cc", "Cde", "Xx", "Yy" ];

如何在每次元素的第一个字母发生变化时获得一个新的 .col-sm-6 块，并使其包含所有以相同字母开头的元素。例如上面的 data 应该导致：

.col-sm-6
  h4 A
  p Aa
  p Abc
.col-sm-6
  h4 C
  p Cc
  p Cde
.col-sm-6
  h4 X
  p Xx
.col-sm-6
  h4 Y
  p Yy

使用以下代码，我在为 <p> 元素生成额外标记缩进时遇到问题，这些元素是 .col-sm-6 的子元素：

.row
  - data = [ "Aa", "Abc", "Cc", "Cde", "Xx", "Yy" ];
  - let firstLetter = "!";
  - for (let i=0; i<data.length; i++) {
  -   if (firstLetter!=data[i][0]) {
  -     firstLetter = data[i][0];
      .col-sm-6
        h4=firstLetter
  -   }
        p=data[i]
  - }

以上产生：

  <div class="row">
    <div class="col-sm-6">
      <h4>A</h4>
    </div>            !! in the wrong place
    <p>Aa</p>
    <p>Abc</p>
                      // </div> to be here
    <div class="col-sm-6">
      <h4>C</h4>
    </div>
    <p>Cc</p>
    <p>Cde</p>
    ...

如何实现我想要的？

Answer 1

我不知道有什么技巧可以在先前动态呈现的元素中添加标签，因为 pug 不会在块之间共享缩进。

问题是当哈巴狗达到

  -   if (firstLetter!=data[i][0]) {
  -     firstLetter = data[i][0];
      div.col-sm-6
        h4=firstLetter
  -   }

它在退出 if 块时立即关闭 div。

我的解决方案 将重新设计逻辑，以便我们在生成新的 .col-sm-6.

时让每个单词都以给定的字母开头

//- arr an array of string
//- returns a Map where keys are letters and values array of words beginning with the key
- function mapByFirstLetter (arr){
-   const letters = new Map();
-    for (const word of arr) {
-       const letter = word.charAt(0)
-       if ( !letters.has(letter) ) {
-           letters.set(letter, [word])
-       } else {
-           const storedWords = letters.get(letter);
-           storedWords.push(word);
-       }
-    }
- return letters;
- }

//- words an array of string
//- render each word in a p
mixin renderWords(words) 
    each word in words
        p= word

div.row
    -data = [ "Aa", "Abc", "Cc", "Cde", "Xx", "Yy"];
    -const myMap = mapByFirstLetter(data)
    -for(const [key, value] of myMap) {
        div.col-sm-6
            h4= key
            +renderWords(value)
    -}

注意：我在 pug 模板中编写了一个新函数，但我建议您在上游脚本中移动这种计算以保留简单的模板文件。

生成额外的缩进以使元素成为外部块的子元素

Generating an extra indent to make an element a child of an outer block

pug