web-dev-qa-db-fra.com

Est-il considéré comme une mauvaise pratique d'utiliser HTML dans Jade?

Jade ressemble à un moteur de modélisation cool et je pense que je vais l'utiliser pour mon prochain projet. Cependant, une partie de la syntaxe n'a pas de sens pour moi.

Qu'obtenez-vous en faisant ceci:

ul
  li
    a(href="#book-a") Book A

au lieu de:

<ul>
  <li><a href="#book-a">Book A</a></li>
</ul>

Je comprends que vous enregistrez un peu de frappe, mais cela me semble moins lisible. J'ai remarqué sur la démo en direct de Jade que le html régulier passe à travers la traduction. Ce serait donc considéré comme une mauvaise pratique de faire quelque chose comme ceci:

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>
node.jsexpresspugtemplate-engine
35
n0pe

Contexte

En fait, la syntaxe jade/pug permet le HTML simple (ou tout autre texte brut) grâce à l'utilisation de 3 syntaxes, comme vous pouvez le voir dans la référence sur le site du projet .

syntaxe des points (également connue sous le nom de " Block in a Tag ")

ul.
  <li><a href="#book-a">Book A</a></li>
  <li><a href="#book-b">Book B</a></li>

syntaxe du canal (également connu sous le nom de " Piped Text ")

ul
  | <li><a href="#book-a">Book A</a></li>
  | <li><a href="#book-b">Book B</a></li>

syntaxe des balises (également connue sous le nom de " Inline in a Tag "), "Placez simplement du contenu après le tag ", peut aussi faire l'affaire

ul
  li <a href="#book-a">Book A</a>

qui rendra

<ul><li><a href="#book-a">Book A</a></li></ul>

La question

Retour à votre question, votre échantillon

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

pourrait être écrit aussi simple que

.someClass
  h3= book.name

Ce qui est beaucoup plus lisible, je pense, donc dans ce cas, vous devriez considérer une mauvaise pratique d'écrire du HTML brut, mais pas toujours.

OMI

OMI, le bon sens est la meilleure bonne pratique. Peut-être que j'envisagerais d'utiliser un morceau brut de HTML pour insérer un widget sur la page, c'est-à-dire une vidéo youtube ou une carte google map <iframe> personnalisée.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed"></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>

Comme indiqué ci-dessus, ici n'a pas de sens d'utiliser syntaxe d'attribut . Le résultat est presque le même et quitte plus rapidement le html brut.

iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed")

iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)
75
laconbass

Jade fournit désormais une syntaxe en ligne pour les balises imbriquées:

a: img

se transforme en

<a><img/></a>

Tiré de la documentation officielle .

7
Nelo Mitranim

vous pouvez également utiliser l'approche suivante pour utiliser du code HTML simple comme moteur de vue.

app.set('views', path.join(__dirname, '/path/to/your/folder'));
app.set("view options", {layout: false});
app.engine('html', function(path, opt, fn) {
  fs.readFile(path, 'utf-8', function(error, str) {
      if (error)
          return str;
      return fn(null, str);
  });

});

1
nilakantha singh deo