Ich habe hässlichen Arbeitscode in meine Jade-Vorlage eingebettet und möchte ihn in ein Mixin verschieben, damit er besser lesbar, wartbar usw. ist.

Der Code

Eine vereinfachte äquivalente Version des Mischens wäre:

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

Warum sollte das funktionieren?

Wenn statt   Ich legte paramObject Ich bekomme den Objektinhalt im HTML gerne {atr1: 2, atr2: 2}Also sind sie da. Wenn ich stattdessen setze paramObject["atr1"] oder paramObject.atr1usw. Ich bekomme nur ein Leerzeichen. Ich vermute, ich greife nicht richtig auf die Attribute zu.

Der Jadecode-Kontext

Ich denke, es wird nicht benötigt, aber hier ist es.

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

Hässliche Problemumgehungslösung

Ich finde das hässlich, weil ich wirklich viel mehr Parameter und viel mehr Attribute / Felder habe, die ich innerhalb des paramObject vergleichen muss, sodass der Rest der Jade-Vorlage nur überladen ist.

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

Der Jadecode-Kontext

Grundsätzlich das gleiche wie zuvor, jedoch wird jeder Objektparameter als anderer Parameter gesendet.

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

Antworten:

1 für die Antwort № 1

Es ist seltsam, dass paramObject arbeitet anstelle von &nbsp. Die Jade-Syntax sollte lauten:

.tile(...)= paramObject

oder

.tile(...) #{paramObject}

Wenn Sie nur Leerzeichen nach dem Tag- oder Klassennamen verwenden, meint Jade, Sie meinen einfachen Text, nicht JS-Code.

Was dein Mixin betrifft, kannst du gehen:

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

.tile(class=moarClasses)= paramObject.atr3

---