如何解决玉中endif不足的问题

Question

有没有办法做这样的事情？

ul.categories
- var categories = [];
each ingredient in mv.data.recipe.ingredients
  if !categories.includes(ingredient.categoryId)
    - categories.push(ingredient.categoryId);
    li.category #{ingredient.categoryName}
      ul.ingredients
  - // endif?
        li.ingredient #{ingredient.number} #{ingredient.unitName} #{ingredient.name}

如果没有 endif? 注释，该代码适用于每个类别中的第一个成分，因为它被 if 语句捕获。

那么这可以通过mixin、extend 或类似的方式解决吗？ endif 可以解决它，但 Jade 没有任何结束关键字，afaik。

或者我必须在我的翡翠文件中使用 HTML 吗？

mv.data.recipe：

{
    "id": 2,
    "name": "Hellmann's hamburgare med hemmagjort br\u00f6d",
    "description": "I v\u00e4rldens godaste hamburgerbr\u00f6d finns en hemlig ingrediens som ingen av dina g\u00e4ster kommer att kunna lista ut; Hellmann's majonn\u00e4s! Prova sj\u00e4lv och uppt\u00e4ck hur saftiga och l\u00e4ckra Hellmann's hamburgerbr\u00f6d blir!",
    "instructions": "<p>Hamburgerbr\u00f6den:<br\/>1. S\u00e4tt ugnen p\u00e5 200 grader. Blanda j\u00e4sten och vattnet (fingervarmt). Hacka chilin. Blanda sedan i mj\u00f6l, Hellmann\u2019s majonn\u00e4s, timjan, chili, socker och ost. Kn\u00e5da degen p\u00e5 medelhastighet i 10 min, blanda sedan ner&nbsp;&nbsp;&nbsp;salt och blanda i ca tv\u00e5 minuter till. <br\/>2. L\u00e5t degen j\u00e4sa 20-30 min eller till dubbel storlek.<br\/>3. Forma bullar till \u00f6nskad storlek och l\u00e5t j\u00e4sa till dubbla storleken under en duk. <br\/>4. Pensla med lite mj\u00f6lk och toppa med sesamfr\u00f6n. Baka av i ca 10 min eller tills dom f\u00e5tt en fin gyllengul f\u00e4rg.<br\/><br\/>Tillbeh\u00f6r:<br\/>1. Skiva r\u00f6dl\u00f6k och tomat. St\u00e4ll fram en sk\u00e5l med Hellmann's majonn\u00e4s och ett paket med skivad cheddarost.<br\/><br\/>Hellmann's hamburgare:<br\/>1. Stoppa allt utom f\u00e4rsen (Anv\u00e4nd g\u00e4rna h\u00f6grevsf\u00e4rs f\u00f6r b\u00e4sta smakupplevelse) i en matberedare och mixa till det \u00e4r sm\u00e5 bitar kvar av allt. Blanda det med h\u00f6grevsf\u00e4rsen och forma till hamburgare. <br\/>2. Stek burgarna medium och servera med en skiva tomat, l\u00f6kringar, cheddarost och en klick majonn\u00e4s i ett Hellmann\u2019s hamburgerbr\u00f6d.<\/p>",
    "src": "\/uploads\/images\/recipes\/recipe-1.jpg",
    "minutes": "60",
    "author": null,
    "rating": "2.599999999985",
    "ingredients": [
        {
            "id": 1,
            "name": "Vatten",
            "optional": 1,
            "number": 4,
            "unitName": "dl",
            "unitMultiplier": 0.1,
            "categoryId": 1,
            "categoryName": "Hellmann's hamburgerbr\u00f6d"
        },
        {
            "id": 2,
            "name": "Vetemj\u00f6l",
            "optional": 1,
            "number": 500,
            "unitName": "g",
            "unitMultiplier": 1,
            "categoryId": 1,
            "categoryName": "Hellmann's hamburgerbr\u00f6d"
        }
        ...snip...
    ]
}

这是我想要在 HTML 中实现的目标：

<ul class="categories">
    <li class="category">Hellmann's hamburgerbröd
        <ul class="ingredients">
            <li class="ingredient">4 dl Vatten</li>
            <li class="ingredient">500 g Vetemjöl</li>
            <li class="ingredient">50 g Jäst</li>
            <li class="ingredient">100 g Majonnäs</li>
            <li class="ingredient">25 g Strösocker</li>
            <li class="ingredient">10 g Salt Fint</li>
            <li class="ingredient">50 g Riven Ost</li>
            <li class="ingredient">2 msk Timjan</li>
            <li class="ingredient">1 msk Chilipeppar Röd</li>
            <li class="ingredient">0.5 dl Sesamfrö</li>
            <li class="ingredient">1 dl Mjölk</li>
        </ul>
    </li>
    <li class="category">Hellmann's hamburgare
        <ul class="ingredients">
            <li class="ingredient">1 st Gul lök</li>
            <li class="ingredient">250 g Bacon Skivat</li>
            <li class="ingredient">3 klyftor Vitlök</li>
            <li class="ingredient">1 msk Oxfond Buljong</li>
            <li class="ingredient">1.5 msk Rökt paprikapulver</li>
            <li class="ingredient">1 kg Köttfärs - Nöt</li>
        </ul>
    </li>
    <li class="category">Tillbehör
        <ul class="ingredients">
            <li class="ingredient">2 st Rödlök</li>
            <li class="ingredient">200 g Cheddarost i Skivor</li>
            <li class="ingredient">2 st Tomater</li>
            <li class="ingredient">100 g Majonnäs</li>
        </ul>
    </li>
</ul>

Answer 1

编辑：完全重写，因为我误解了最初发布的问题。

在 Jade 之前进行分组。

var categories = {};
mv.data.recipe.ingredients.forEach(function(ingredient) {
  if (!categories[ingredient.categoryName]) {
    categories[ingredient.categoryName] = [];
  }
  categories[ingredient.categoryName].push(ingredient);
});

然后将categories 给Jade。从那里很容易：

ul.categories
  each categoryName, ingredients in categories
    li.category #{categoryName}
      ul.ingredients
        each ingredient in ingredients
          li.ingredient #{ingredient.number} #{ingredient.unitName} #{ingredient.name}

（这是一个假定没有两个类别具有相同名称的快捷方式；如果不是这样，您可能希望有一个对象 categories 将 ID 映射到类别名称，另一个 categoryIngredients 映射类别 ID到上面的成分数组。逻辑并不复杂。）

Answer 2

好吧，这是一种方法，不是那么优雅；但现在必须这样做。我会把这个问题留几天，以防有人有更漂亮的方式来做这件事。或者，如果我自己找到更好的解决方案。

ul.categories
  - var categories = [];
  each ingredient in mv.data.recipe.ingredients
    if !categories.includes(ingredient.categoryId)
      if categories.length > 0
        </ul></li>
      - categories.push(ingredient.categoryId);
      <li class="category">#{ingredient.categoryName}<ul class="ingredients">
    li.ingredient #{ingredient.number} #{ingredient.unitName} #{ingredient.name}
  </ul></li>

Answer 3

如the Jade demo page 上的第一个示例所示，不需要“endif”，因为控制流（至少部分）由缩进表示。

所以只需将缩进拉回即可。