Question

我有一个看起来像这样的mixin：

mixin getrooms
  div
    label
    select
      - for (var i = 1; i <= 10; i++) {
        if i === 1
           option(value='#{i}') #{i} room
        else
           option(value='#{i}') #{i} rooms
      - }
+getrooms

mixin norooms
  div
    label Room Type:
    input(type='text', placeholder='Room Type', name='roomType')

+norooms

根据所选房间的数量，想要乘以+ norooms mixin。

示例如果选择了3，就像要显示+ norooms三次。

任何帮助都会非常感激，不确定解决方案是使用Pug还是只是纯粹的Javascript但是没有任何建议（请不要使用jquery）。

我有一个pen你可以看一下。

旁注：当我尝试控制登录req.body.rooms时，它会一直返回＃{i}而不是实际的textContent。

Answer 1

Pug无法解决这个问题，因为它是非静态的（在将HTML发送到客户端之前，只调用一次Pug）。看看处理选择事件的客户端事件处理库，例如jQuery。然后，您可以适当地相乘项目，例如使用.clone()方法。

关于您的注释：Pug中的属性插值is not supported anymore。只需说value=id。

根据所选的选项多次调用mixin

1 个答案: