访问Jade Mixins中的JSON属性

Question

动机

我的Jade模板中嵌入了一些丑陋的工作代码，我想把它移到mixin中，因此它更具可读性，可维护性等。

代码

混合的简化等效版本是：

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

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

如果不是 我放paramObject，我就会像{atr1: 2, atr2: 2}那样获取HTML中的对象内容，所以他们就在那里。如果我改为放置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，这很奇怪。 Jade语法应该是：

.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