在 Jade Mixins 中访问 JSON 属性

Question

动机

我的 Jade 模板中嵌入了一些丑陋的工作代码，我想将其移动到一个 mixin 中，以便它更具可读性、可维护性等。

代码

混合的简化等效版本是：

mixin mixinName(param1, param2, paramObject)
    .tile(class="#{param1 >= paramObject['atr1'] && param1 < paramObject['atr1'] + paramObject['atr2'])?'additionalClass':''"}) &nbsp;

为什么我认为这应该有效？

如果我把 paramObject 而不是  ，我会得到 HTML 中的对象内容，就像 {atr1: 2, atr2: 2}，所以它们就在那里。如果我改为输入 paramObject['atr1'] 或 paramObject.atr1，等等，我只会得到一个空白 space。我的猜测是我没有正确访问属性。

玉典脉络

我认为不需要，但在这里。

...
template(repeat="{{col in columns | enumerate}}")
    .col
        template(repeat="{{tile in col.value | enumerate}}")
            +mixinName("{{col.index}}", "{{tile.index}}", "{{cursor}}")
...

丑陋的解决方案

我认为这很丑陋，因为我确实有更多参数，还有更多 attributes/fields 我需要在 paramObject 中进行比较，所以它只会弄乱 Jade 模板的其余部分。

mixin mixinName(param1, param2, paramObjectAtr1, paramObjectAtr2)
    .tile(class="#{param1 >= paramObjectAtr1 && param1 < paramObjectAtr1 + paramObjectAtr2)?'additionalClass':''"}) &nbsp;

玉典脉络

与之前基本相同，但将每个对象参数作为不同的参数发送。

...
template(repeat="{{col in columns | enumerate}}")
    .col
        template(repeat="{{tile in col.value | enumerate}}")
            +mixinName("{{col.index}}", "{{tile.index}}", "{{cursor['atr1']}}", "{{cursor['atr2']}}")
...

Answer 1

奇怪的是 paramObject 代替了 &nbsp。 Jade 语法应该是：

.tile(...)= paramObject

或

.tile(...) #{paramObject}

如果您只是在标签或 class 名称后使用 space，Jade 认为您指的是纯文本，而不是 JS 代码。

至于你的mixin，你可以去：

mixin mixinName(param1, param2, paramObject)
  - var moarClasses = [];
  - if (param1 >= paramObject.atr1 &&
  -     param1 < paramObject.atr1 + paramObject.atr2)
  -   moarClasses.push('additionalClass');

  .tile(class=moarClasses)= paramObject.atr3

在 Jade Mixins 中访问 JSON 属性

Accessing JSON attributes within Jade Mixins

json

mixins

javascript-objects

pug

动机

代码

为什么我认为这应该有效？

玉典脉络

丑陋的解决方案

玉典脉络