Как вызвать другую переменную из одного нефритового миксина? - PullRequest
Новая
       6

Как вызвать другую переменную из одного нефритового миксина?

0 голосов
/ 03 декабря 2018

У меня есть 6 карт для отображения на одной стороне заголовка и списка.Поскольку все они имеют одинаковую структуру, я создаю миксин с использованием Jade.Так как каждая карта отображает свой список, мне нужно создать разные переменные, по одной для каждого списка.Возможно ли, и если да, то как создать изменяемый аргумент, чтобы при использовании этого миксина я мог изменить только последний аргумент для доступа к нужной мне переменной?например:

У меня будут 6 разных переменных с элементами списка 

-var benefitsCard1 = ['benefit 1', 'benefit 2', 'benefit 3, 'benefit 4'];
-var benefitsCard2 = ['benefit 5', 'benefit 6', 'benefit 7, 'benefit 8'];

...

и в миксине, где написано краткий выигрышCard1 (последний аргумент)например, изменить имя переменной, к которой мне нужно получить доступ, чтобы создать список, или, если возможно, создать миксин с пустым аргументом (например, '' ), чтобы назвать этот аргументПеременная я хочу получить доступ.Это возможно? 

mixin benefits(image, h4, p4, benefitsCard1)
  .col-sm-4
    .benefits__card-front
      img(src='img/' + image + '.svg')
      h4
        | #{strings[''+h4]}
      p4
        | #{strings[''+p4]}
    .benefits__card-back
      h4
        | #{strings[''+h4]}
      ul
        each benefit in benefitsCard1
          li
            p1
             | #{strings[''+benefit]}

1 Ответ

0 голосов
/ 03 декабря 2018

Параметры в миксинах Pug работают так же, как и в функциях JavaScript - если вы передаете переменную в качестве аргумента, вы можете получить доступ к значению этой переменной, используя имя параметра вместо имени исходной переменной.

Таким образом, вы можете просто назвать параметр в своем миксине benefits и получить к нему доступ таким образом.

Декларация миксина 

mixin benefitsList(benefits)
  ul
    each benefit in benefits
      li #{benefit}

Использование 

- var benefits1 = ['one', 'two', 'three']
- var benefits2 = ['four', 'five', 'six']
- var foobar = ['seven', 'eight', 'nine']

+benfitsList(benefits1)
+benfitsList(benefits2)
+benfitsList(foobar)
+benfitsList(['ten', 'eleven', 'twelve'])

Вывод 

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<ul>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>
<ul>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
</ul>
<ul>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
</ul>

Надеюсь, это поможет.

...