在 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 等，我只会得到一个空格。我的猜测是我没有正确访问属性。

玉代码上下文

我认为它不需要，但它是。

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

丑陋的解决方法

我认为这很难看，因为我确实有更多参数，还有更多我需要在 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。玉语法应该是：

.tile(...)= paramObject

或

.tile(...) #{paramObject}

如果你只是在标签或类名之后使用空格，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