node.js - style - Pug `#{}` no puede cargar la variable dentro de `onclick`

pug href interpolation

Question

Así que estoy usando un objeto javascript para representar una lista de elementos. Mi objeto se ve así:

{
            text: ''One'',
            url: ''index.pug''
        },
        {
            text: ''Two'',
            url: ''Two.pug''
        },
        {
            text: ''Three'',
            url: ''Three.pug''
        }
}

La parte interesante es cuando pug los renderiza. Los renderizo usando algo como esto:

div
    ul.horizontalScroll
        each item in params.apps
            li
                a(onclick="loadXMLDoc(#{item.url})") #{item.text}

Lo que no puedo entender es por qué item.text se representa correctamente, pero al hacer clic en el enlace no hace ping a la función. En el inspector de Chrome, vi esto: <a onclick="loadXMLDoc(#)">One </a> . ¿Por qué el argumento no viene como index.pug como debería?

Answer 1

Intente concatenar la variable dentro del atributo:

a(onclick="loadXMLDoc(''" + item.url + "'')") #{item.text}

Answer 2

La solución aceptada no funcionó para mí. Pude seguir adelante con algo ligeramente diferente.

a(onclick="loadXMLDoc(''#{item.url}'')") #{item.text}

Tenga en cuenta la diferencia en comillas simples y dobles. También ten cuidado, porque la autocompletación de texto podría intentar agregar aún más comillas.

Esta solución funciona porque loadXMLDoc espera una cadena. Necesita utilizar caracteres de cotización diferentes para que la cadena de URL quede anidada dentro de la cadena de atributo cuando se convierta en html.