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

这里有一种做法，而不是优雅;但它现在必须要做。如果有人有更漂亮的方式，我会将问题保持开放几天。或者如果我自己找到更好的解决方案。

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 2

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

在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 3

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

所以只需将你的缩进拉回来。

如何绕过玉石的缺乏

3 个答案: