example - ejs templates javascript

Entreteje las variables EJS y Javascript dentro de<% tags

Question

Necesito usar una variable de Javascript (definida en el front-end) en algún código EJS, de la siguiente manera:

var selected = 1;
<% for (var i=0; i < supplies.length; i++) { %>
    if (i == selected) {
        console.log(supplies);    
    }
<% } %>

Estoy usando EJS, Express.js y socket.io. Podría convertir la variable Javascript en una variable EJS enviando un mensaje a mi instancia del servidor Node.js, pero eso es un poco tonto ... ¿Hay alguna manera de usar variables de JavaScript dentro de EJS?

EDITAR: Quiero acceder a los suministros, una matriz de JavaScript, después de que el usuario haya seleccionado un elemento de un menú desplegable. Cuando selecciona este elemento, una función de JavaScript con el código anterior necesita acceder a algunos EJS. Es por eso que necesito usar una variable JavaScript normal en EJS.

Answer 1

¿Puedo pasar una variable de JavaScript en una plantilla? :

Es posible obtener más datos en la plantilla y volver a procesarlos, pero no de la manera que usted está pensando, y sin hacer otra solicitud al servidor (a menos que sea para obtener más datos, no para obtener más HTML).

Solución:

Esta pregunta será difícil de responder sin más detalles, por lo que voy a hacer algunas suposiciones sobre por qué quiere pasar un valor seleccionado a una plantilla EJS. Haré todo lo posible para responder a esto con información limitada sobre sus objetivos.

Parece que su usuario está realizando alguna acción en la página, como seleccionar un suministro de limpieza, y desea representar los datos de manera diferente, según el elemento que seleccionó el usuario. Para ello, puede volver a procesar la plantilla y pasar los datos que identifican qué elemento se selecciona, utilizando un asistente de visualización para aplicar una clase específica al elemento seleccionado:

Aquí está la plantilla modificada de cleaning.ejs, con la clase agregada usando view helper:

cleaning.ejs:

<script>
// NOTE: even if uncommented, JavaScript inside a template will not run.
//    var selected = 1;
</script>
<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>

        <li>
            <!-- apply a class to the selected element -->
            <a class=''<%= supplies[i].selected %>'' href=''supplies/<%= supplies[i].value %>''>
                <%= supplies[i].value %>
            </a>
        </li>
    <% } %>
</ul>    

El HTML renderizado se ve así:

<script>
    /** NOTE: Script blocks will not fire in rendered templates. They are ignored
    //    var selected = 1;
</script>
<h1>Cleaning Supplies</h1>
<ul>


        <li>
            <a class="" href="supplies/Broom">
                Broom
            </a>
        </li>


        <li>
            <!-- Note the selected element -->
            <a class="selected" href="supplies/mop">
                mop
            </a>
        </li>


        <li>
            <a class="" href="supplies/Hammer">
                Hammer
            </a>
        </li>

</ul>

Esta vista se procesó utilizando el siguiente código JavaScript:

// modified data structure so that array of supplies contains objects
 // with the name of the item and whether or not it''s selected.
data = {
    "title":"Cleaning Supplies",
    "supplies":[
        {
            "value":"Broom",
            "selected":""
        },
        {
            "value":"mop",
            "selected":"selected"
        },
        {
            "value":"Hammer",
            "selected":""
        }
    ]
};

// pass data into template and render
var html = new EJS({url: ''cleaning.ejs''}).render(data);

// add HTML to the DOM using a <div id="container"></div> wrapper.
document.getElementById("container").innerHTML = html;

Como puede ver, los suministros [i] .selected aplican la clase seleccionada al elemento que se marcó como seleccionado en la estructura de datos. Modifiqué el valor href para que accediera al objeto en el i-ésimo elemento de la matriz en lugar del valor de la matriz en sí.

Ahora, cuando se modifica el elemento seleccionado, simplemente modificamos la variable de datos, volvemos a renderizar la plantilla EJS y la agregamos al DOM.

Con este CSS en el encabezado de su documento HTML, verá algo similar a lo que se muestra a continuación:

<style>
    .selected { color:red; }
</style>

Por qué JavaScript en la plantilla no se ejecuta:

El método que está intentando usar para manipular valores de JavaScript o usar valores de JavaScript dentro de la plantilla de EJS no funcionará. Esto tiene que ver principalmente con el contexto de cuándo se ejecuta JavaScript.

Tiene razón al pensar que las plantillas de EJS están compiladas en el lado del cliente. Sin embargo, el JavaScript en los ayudantes de vista se ejecuta independientemente del JavaScript en el contexto Global. Al observar el código fuente de ejs.js, parece que eval se usa en el proceso.

Además, EJS devuelve el HTML representado como una cadena, y la documentación de EJS nos indica que inyectemos esa cadena de plantilla representada en el DOM usando innerHTML:

document.getElementById("container").innerHTML = html;

Independientemente de la tecnología de visualización que utilice, una de las verdades fundamentales de algunos navegadores cuando se trata de JavaScript es esta: algunos navegadores pueden no evaluar los bloques de <script> añadidos al DOM utilizando innerHTML.

En otras palabras, en mi plantilla de prueba, cuando intenté agregar una etiqueta de script para mostrar el valor seleccionado en la consola, pude ver que el bloque de script se había agregado, pero debido a la forma en que funciona innerHTML, no se ejecutó:

La plantilla de ejemplo demuestra que JavaScript no se ejecutará si se agrega usando innerHTML:

 <h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) {  %>
       <span id="selected"></span><script>console.info(''test <%= i %> = <%= supplies[i] %>'');</script>            
        <li>
            <a href=''supplies/<%= supplies[i] %>''>
                <%= supplies[i] %>
            </a>
        </li>
    <% } %>
</ul>

HTML procesado:

Como puede ver a continuación, las instrucciones console.log están presentes en el HTML. Sin embargo, cuando se agrega usando innerHTML, no se dispararán.

El enfoque a seguir con las tecnologías de visualización es limitar su uso a solo eso, representando la vista. Mantenga su lógica en el "JavaScript normal".

<h1>Cleaning Supplies</h1>
<ul>

       <span id="selected"></span><script>console.info(''test 0 = Brrom'');</script>            
        <li>
            <a href=''supplies/Brrom''>
                Brrom
            </a>
        </li>

       <span id="selected"></span><script>console.info(''test 1 = mop'');</script>            
        <li>
            <a href=''supplies/mop''>
                mop
            </a>
        </li>

       <span id="selected"></span><script>console.info(''test 2 = Hammer'');</script>            
        <li>
            <a href=''supplies/Hammer''>
                Hammer
            </a>
        </li>

</ul>

Se pueden encontrar más ejemplos y documentación en las plantillas de EJS en el sitio JavaScript de código de Google .