Mam brzydki działający kod osadzony w moim szablonie Jade i chcę go przenieść do miksu, aby był bardziej czytelny, łatwiejszy w utrzymaniu itp.

Kod

Uproszczona równoważna wersja mieszania wyglądałaby następująco:

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

Dlaczego uważam, że to powinno działać?

Jeśli zamiast   włożyłem paramObject Otrzymuję zawartość obiektu w formacie HTML {atr1: 2, atr2: 2}więc są tam. Jeśli zamiast tego wstawię paramObject["atr1"] lub paramObject.atr1itd. Dostaję tylko spację. Domyślam się, że nie uzyskuję prawidłowego dostępu do atrybutów.

Kontekst kodu jadeitowego

Myślę, że nie jest to potrzebne, ale oto jest.

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

Brzydkie rozwiązanie tymczasowe

Myślę, że jest to brzydkie, ponieważ naprawdę mam o wiele więcej parametrów i wiele więcej atrybutów / pól, które muszę porównać w paramObject, więc po prostu zaśmieca resztę szablonu Jade.

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

Kontekst kodu jadeitowego

Zasadniczo to samo, co poprzednio, ale wysyłanie każdego parametru obiektu jako innego parametru.

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

Odpowiedzi:

1 dla odpowiedzi № 1

To dziwne paramObject działa zamiast &nbsp. Składnia Jade powinna wyglądać następująco:

.tile(...)= paramObject

lub

.tile(...) #{paramObject}

Jeśli użyjesz spacji po tagu lub nazwie klasy, Jade uważa, że ​​masz na myśli zwykły tekst, a nie kod JS.

Jeśli chodzi o Twój miks, możesz:

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

.tile(class=moarClasses)= paramObject.atr3

---