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

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 模板中编写了一个新函数，但我建议您在上游脚本中移动这种计算以保留简单的模板文件。