web-dev-qa-db-fra.com

Comment faire en sorte que Jade arrête les attributs d'élément d'encodage HTML et génère une valeur de chaîne littérale?

UPDATEJade v0.24.0 corrige cela avec une syntaxe != pour les attributs. option(value!='<%= id %>')

J'essaie de créer un <option> avec jade, où la valeur de l'option est un marqueur de modèle UnderscoreJS: <%= id %>, mais je ne parviens pas à le faire fonctionner car jade convertit le texte de mon marqueur en &lt;= id &gt;.

Voici mon balisage Jade:

script(id="my-template", type="text/template")
  select(id="type")
    &lt;% _.each(deviceTypes, function(type){ %>
    option(value='&lt;%= type.id %>') <%= type.name %>
    &lt;% }) %>

Je m'attends à ce qu'il produise ce code HTML:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="<%= type.id %>"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

Mais ce que je reçois à la place, c'est ceci:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="&lt;%= type.id %&gt;"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

Notez la différence très subtile dans la ligne <option> de la sortie ... l'attribut value de l'option a été codé en HTML.

Comment empêcher Jade d'encoder HTML avec cette valeur? J'en ai besoin pour produire la valeur littérale, de la même manière que pour le texte de l'option.

templatesunderscore.jspughtml-encodestring-literals
37
Derick Bailey

Au moment d'écrire ces lignes, je ne crois pas qu'il y ait un moyen d'y arriver. Voir ce numéro: https://github.com/visionmedia/jade/issues/198

J'ai fini par passer en HTML brut pour le résoudre, en utilisant le | préfixe.

5
Kevin Dente

Derick a déjà mentionné que Jade avait ajouté une nouvelle fonctionnalité pour l'encodage HTML sans détour dans la mise à jour, mais j'aimerais ajouter un addenda pour quelqu'un qui pourrait ne pas le reconnaître.

- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded

de https://github.com/visionmedia/jade

99
Minime

Cette fonctionnalité a été ajouté à Jade . Vous utilisez simplement l'opérateur != si vous souhaitez dissocier les valeurs d'attribut:

script#my-template(type='text/template')
  a(href!='<%= url =>') Clicky clicky...
33
Mike M. Lin

J'avais donc un problème similaire à celui-ci, où je voulais créer un modèle Underscore dans l'une de mes vues Jade. Une partie du gabarit de soulignement nécessaire pour définir l'attribut selected dans une balise <option>.

Au départ, j'ai essayé de faire revenir Underscore "sélectionné" ou "". Malheureusement, Jade ne dispose pas d'un moyen d'afficher un attribut sans valeur et d'un moyen de ne pas laisser de noms d'attributs (les bits Underscore revenaient sans guillemets).

Heureusement, vous pouvez décaper le value d'un attribut, en préservant les guillemets.

Dans cet exemple, je sélectionne une valeur d'une liste déroulante en fonction du type de propriétaire correspondant à une valeur de chaîne. J'ai défini une fonction d'assistance pour ne pas avoir à échapper manuellement des guillemets.

- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" };

.clearfix
  label Title:
  .input
    select(type="text", name="contact[title]", class="new-title")
      option(value="") Choose Title
      option(value="manager", selected="#{ checkType('manager') }") Manager
      option(value="member", selected="#{ checkType('member') }") Member
      option(value="owner", selected="#{ checkType('owner') }") Owner
      option(value="president", selected="#{ checkType('president') }") President
      option(value="individual", selected="#{ checkType('individual') }") Individual
      option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact

Selon certains, vous devriez pouvoir utiliser !{} ici pour éviter complètement tout encodage (<, >, etc.), mais cela ne fonctionnait pas sur ma version de Jade. J'utilise "^0.30" et la version actuelle est 1.x. 

Si quelqu'un peut vérifier que !{} fonctionne dans cette situation avec la dernière version de Jade, je mettrai à jour ma réponse.

0
AlbertEngelB