Передача переменной в функцию интерполяции тегов Pug / Jade - PullRequest
Новая
       8

Передача переменной в функцию интерполяции тегов Pug / Jade

1 голос
/ 29 июня 2019

Цитата официальной страницы Pug относительно теговой интерполяции:

Интерполяция работает не только для значений JavaScript, но и для Pug.Вы можете сделать то же самое, написав HTML-тэг, встроенный в ваш Pug ... но тогда какой смысл писать Pug?Оберните встроенное объявление тега Pug в # [и] , и оно будет оценено и помещено в содержимое содержащего его тега.

Простыми словами, что я беруотсюда то, что я могу оценить язык мопса из того, что я положил внутрь #[].

И это действительно поведение.Пример:

(thing.pug): 

h5 My name is #[-console.log('hi from serverside')] //outputs hi from serverside

Однако я хочу иметь возможность передавать переменную в часть интерполяции, например:

(не работает): 

-var john = -console.log('hi from serverside') //will render now
-console.log(typeof john) // number o.O
h5 My name is #[john] //but now nothing

Я думаю, может быть, мне нужно сделать какое-то преобразование типов?typeof x показывает, что переменная является числом, но Number(john) только что заставил переменную возвращать NaN.

Как я могу передать переменную #[x], которая на самом деле будет работать?

1 Ответ

1 голос
/ 01 июля 2019

Синтаксис для функции интерполяции тегов Pug требует определения тега.

Пример 1 

h5 My name is #[span]

совпадает с 

h5 My name is
    span

Оба из которых компилируются в 

<h5> My name is
    <span></span>
</h5>

Пример 2

В том же смысле это: 

h5 My name is #[john]

одинаковоas 

h5 My name is
    john

Оба из которых компилируются в 

<h5> My name is
    <john></john>
</h5>

независимо от того, является ли john предварительно определенной переменной javascript.

Пример 3

Правильное использование встроенной интерполяции тегов выглядит следующим образом: 

h4 Hello, my name is #[span John Wick]

, который компилируется в: 

<h4>Hello, my name is <span>John Wick</span></h4>

Его цель - обеспечить более семантическое размещение встроенных тегов.теги в Pug.

Пример 4

Если вы хотите вывести переменную в виде строки, используйте обычную интерполяцию строки : 

- var name = 'John'

h4 Hello my name is ${name}

Компилируется в: 

<h4>Hello my name is John</h4>

Пример 5

Если вы хотите использовать встроенную интерполяцию тегов с регулярной строковой интерполяцией переменных, вы можете do это тоже: 

- var name = 'John Wick'

h4 Hello, my name is #[span ${name}]

Но вам нужно указать, какой тег используется (в данном случае span)

Пример 6

Если вам нужно, вы также можете сделать это имя тега динамическим: 

- var myTag = 'em'
- var myName = 'John Wick'

h4 Hello, my name is #[${myTag} ${myName}]

компилируется в: 

<h4>Hello, my name is <em>John Wick</em></h4>

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

...