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?

Question

Mise à JOUR de Jade v0.24.0 résout ce avec un != de la syntaxe pour les attributs. option(value!='<%= id %>')

---

Je suis en train de construire un <option> avec le jade, où la valeur de l'option est un UnderscoreJS marqueur de modèle: <%= id %> mais je n'arrive pas à travailler parce que le jade est la conversion de mon marqueur de texte à l' <= id >.

Voici ma Jade de balisage:

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

Je l'attends pour produire 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, est-ce:

<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>

Remarque la très subtile différence dans le <option> ligne de la sortie... l' value attribut de l'option HTML de codage.

Comment puis-je empêcher de Jade de codage HTML de cette valeur? J'en ai besoin pour produire de la valeur littérale, de la même manière qu'il le fait avec le texte de l'option.

Answer 1

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 ne le reconnaîtrait peut-être pas.

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

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

Answer 2

Cette fonctionnalité a été ajoutée à 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...
 

Answer 3

Au moment où j'écris ces lignes, je ne crois pas qu'il existe un moyen d'y parvenir. Voir ce numéro: https://github.com/visionmedia/jade/issues/198

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

Answer 4

Si j'ai eu un problème similaire: j'ai voulu créer un trait de Soulignement modèle à l'intérieur de l'un de mes Jade points de vue. Un morceau de le trait de Soulignement de modèle nécessaire pour définir l' selected d'attribut dans une <option> balise.

Au départ, j'ai essayé d'avoir le trait de Soulignement de retour "sélectionné" ou "". Malheureusement, Jade n'ont pas un moyen pour afficher un attribut avec aucune valeur et n'ont pas un moyen de non-sortir des noms d'attributs (le trait de Soulignement bits revenaient sans les guillemets).

Heureusement, vous êtes en mesure de ne pas encoder la valeur d'un attribut, en préservant les guillemets.

Dans cet exemple, je suis à la sélection d'une valeur d'une liste déroulante basée sur le type de propriétaire correspondant à une valeur de chaîne. J'ai défini une fonction d'aide je ne voudrais pas avoir à manuellement échapper les 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 être en mesure d'utiliser !{} ici d'éviter complètement de tous encodage (<, >, etc.), cependant, cela ne fonctionne pas sur ma version de Jade. Je suis à l'aide d' "^0.30" et la version actuelle est - 1.x.

Si quelqu'un peut vérifier qu' !{} ne travaillent dans cette situation à l'aide de la dernière version de Jade, je vais mettre à jour ma réponse.