Interrôle des variables EJS et Javascript à l'intérieur des balises & lt;%

J'ai besoin d'utiliser une variable Javascript (défini dans le front-end) dans certains EJS code, comme suit:

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

Je suis en utilisant EJS, Express.js et de la prise.io. J'ai pu convertir la variable Javascript à un EJS variable en envoyant un message à mon Node.js instance de serveur, mais c'est un peu idiot... Est-il un moyen d'utiliser des variables Javascript à l'intérieur de EJS?

EDIT:
Je veux accéder à de fournitures, d'un tableau javascript, après que l'utilisateur a sélectionné un élément dans un menu déroulant. Lorsqu'il sélectionne ce point, une fonction javascript avec le code ci-dessus a besoin d'accéder à certains EJS. C'est pourquoi j'ai besoin d'utiliser une normale de la variable Javascript dans EJS.

source d'informationauteur philipDS

43

Puis-je passer une variable JavaScript dans un modèle?:

Il est possible d'obtenir plus de données dans le modèle et le rendre à nouveau, mais pas de la manière que vous êtes en train de penser, et sans en faire une autre demande pour le serveur (sauf si c'est pour obtenir plus de données, de ne pas obtenir plus de HTML).

Solution:

Cette question va être difficile de répondre sans plus de précisions, je vais donc faire des hypothèses sur pourquoi vous souhaitez passer une valeur sélectionnée dans une EJS modèle. Je vais faire de mon mieux pour répondre à ce peu d'information à propos de vos objectifs.

Il semble que votre utilisateur effectue une action sur la page, la sélection d'une offre de nettoyage, et vous voulez rendre les données différemment, en fonction de l'élément sélectionné par l'utilisateur. Pour ce faire, vous pouvez vous rendre à nouveau le modèle et passez de données qui identifie l'élément est sélectionné, à l'aide d'un helper de vue d'appliquer une classe spécifique à l'élément sélectionné:

Ici est la modification de nettoyage.ejs modèle, avec la catégorie ajoutés en utilisant le helper de vue:

de nettoyage.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>
            
            <a class='<%= supplies[i].selected %>' href='supplies/<%= supplies[i].value %>'>
                <%= supplies[i].value %>
            </a>
        </li>
    <% } %>
</ul>    
```
Le rendu HTML ressemble à ceci:
```
<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>
            
            <a class="selected" href="supplies/mop">
                mop
            </a>
        </li>


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

</ul>
```
Ce point de vue a été rendu en utilisant le code JavaScript suivant:
```
//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;
```
Comme vous pouvez le voir, les fournitures[i].sélectionné s'applique à la classe sélectionnée à l'élément qui est sélectionné dans la structure de données. J'ai modifié le href valeur, de sorte qu'il accède à l'objet dans le i-ème élément de tableau au lieu de la valeur de l'ensemble lui-même.

Maintenant, lorsque l'élément sélectionné est modifié, il nous suffit de modifier la variable de données, un nouveau rendu de l'EJS modèle, et l'ajouter au DOM.

Avec ce code CSS dans le head de votre document HTML, vous verrez quelque chose de similaire à ce qui est affiché ci-dessous:
```
<style>
    .selected { color:red; }
</style>
```
Pourquoi JavaScript dans le modèle ne fonctionne pas:

La méthode que vous tentez d'utiliser JavaScript pour manipuler les valeurs ou l'utilisation de JavaScript valeurs à l'intérieur de l'EJS modèle ne fonctionne pas. Cela a à voir avec, principalement, le contexte de quand le JavaScript est exécuté.

Vous êtes en droit de penser que l'EJS modèles sont compilés sur le côté client. Cependant, le JavaScript dans les aides de vue sont exécutées indépendant du JavaScript dans le contexte Mondial. En regardant le ejs.js le code source, il apparaît que si la fonction eval est utilisé dans le processus.

En outre, EJS retourne le rendu HTML comme une chaîne de caractères, et la documentation de EJS nous enseigne à injecter qui a rendu chaîne de modèle dans le DOM utilisant innerHTML:
```
document.getElementById("container").innerHTML = html;
```
Pas d'importance ce que la vue de la technologie que vous utilisez, l'une des vérités fondamentales de certains navigateurs quand il s'agit de JavaScript est: est-ce Certains navigateurs ne peuvent pas évaluer <script> blocs ajoutés à la DOM en utilisant innerHTML.

En d'autres termes, dans mon modèle de test, quand j'ai essayé d'ajouter une balise de script à la sortie de la valeur sélectionnée de la console, j'ai pu voir que le bloc de script a été ajouté, mais en raison de la façon innerHTML œuvres, il n'a pas été exécutée:

Exemple de Modèle de Montre JavaScript ne fonctionne pas si elle est ajoutée en utilisant 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>
```
Rendu HTML:

Comme vous pouvez le voir ci-dessous, la console.journal d'états sont présents dans le code HTML. Toutefois, lorsqu'il est ajouté en utilisant innerHTML, ils ne se déclenchera pas.

L'approche à adopter avec vue technologies de limiter leur utilisation à cela, le rendu de la vue. Gardez votre logique dans la "régulière JavaScript".
```
<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>
```
Plus d'exemples et de la documentation peut être trouvée sur EJS Modèles sur le Google Code JavaScript Intégré site.

Vous devez vous connecter pour publier un commentaire.

Solution:

Pourquoi JavaScript dans le modèle ne fonctionne pas: