javascript - example - jade page
¿Cómo puedo obligar a jade a usar un bigote? (4)
Esta es mi figura de jade :
section#entry-review-template.template(data-class=''entry-review'')
table
thead
tr
th=''Date''
th=''Title''
th
tbody
Cuando empiezo a agregarle un mustache , siento que empieza a perder su gracia habitual, ya que ahora se pone muy delicada con los poros de su cara.
{{^entries}}
h1=''No Posts''
div=''There are no blog posts to review.''
{{/entries}}
Sin embargo, cuando intento agregarle la última pieza de bigote a su cuerpo esta vez, ella comienza a quejarse, y se rompe y no quiere ayudar, o simplemente hace un lío.
{{#entries}}
tr
td=''{{date}}''
td=''{{title}}''
td
a.remove-entry
{{/entries}}
Resultando en algo como esto:
{{^entries}}
<h1>No Posts</h1><div>There are no blog posts to review.</div>{{/entries}}
{{#entries}}
<table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table>{{date}}{{title}}<a class="remove-entry"></a>{{/entries}}
Parece que no puedo hacer que el jade produzca correctamente el texto plano de mi bigote.
Esta es una aplicación node.js que usa jade para crear una plantilla de mis vistas en el lado del servidor. No paso ningún modelo a ninguna de mis vistas (ese tipo de trabajo pesado que dejo al lado del cliente), pero aún así Necesito hacer un montón de inclue partial todas partes. Y tengo un montón de jade. Y me encanta el jade. No quiero dejarla ir.
Ahora quiero implementar plantillas de bigote muy simples en el lado del cliente, y me gustaría que estuvieran en línea en mis vistas.
Por supuesto, podría evitarlo, y tenerlos en etiquetas de script o renderizarlos con otro motor de visualización (ahora que lo pienso, ni siquiera se siente una cosa fácil o simple de hacer), pero entonces habría para escribir html en bruto para ellos, y yo quería mezclar lo mejor de ambos mundos.
- ¿Estoy loco por siquiera intentarlo?
- ¿Cómo puedo decirle a Jade que esto es solo un juego y hacer que ignore mi
{{#must}} {{/ache}}? - ¿Se puede decir a Jade que ignore de alguna manera los espacios en blanco?
- ¿Qué otras opciones crees que debería considerar?
Realmente quiero que el jade use un bigote. Sé que es raro, pero me excitaría.
Actualizar:
Acabo de intentar usar el | , documentado aquí , pero incluso el más simple:
section#entry-review-template.template(data-class=''entry-review'')
table
thead
tr
th=''Date''
th=''Title''
th
tbody
| {{#entries}}
| {{/entries}}
termina dando salida:
{{#entries}}
{{/entries}}
<table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table><h1></h1>
Ok, entonces esto podría llegar demasiado tarde para ser de alguna utilidad, y ya hay una respuesta aceptada (donde, por cierto, no entendí muy bien lo que "podría eliminar los comentarios" realmente significaba allí). Sin embargo, pensé que podría ser útil para todos en trabajos futuros, así que esto es lo que he encontrado hasta ahora.
Tomó los pequeños fragmentos de su código de arriba y los puso en un ejemplo usando la misma sintaxis simple de "salida de texto" que aparentemente le dio una salida extraña mezclada:
section#entry-review-template.template(data-class=''entry-review'')
table
thead
tr
th Date
th Title
th
tbody
| {{#entries}}
tr
td {{date}}
td {{title}}
td
a.remove-entry
| {{/entries}}
Colóquelo en un cuadro de edición en el sitio de Jade en vivo ( http://naltatis.github.com/jade-syntax-docs ) y obtenga la salida de Jade como:
<section id="entry-review-template" data-class="entry-review" class="template">
<table>
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th></th>
</tr>
</thead>
<tbody>{{#entries}}
<tr>
<td>{{date}}</td>
<td>{{title}}</td>
<td><a class="remove-entry"></a></td>
</tr>{{/entries}}
</tbody>
</table>
</section>
Luego lo tomé y lo probé en el sitio de TryHandlebars ( http://tryhandlebarsjs.com ) con los siguientes datos:
{ "entries" :
[
{ "date" : "Jan 2, 2010", title: "ABCDEF" },
{ "date" : "Nov 15, 2012", title: "UVWXYZ" }
]
}
Y se ejecutó correctamente con la siguiente salida:
<section id="entry-review-template" data-class="entry-review" class="template">
<table>
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan 2, 2010</td>
<td>ABCDEF</td>
<td><a class="remove-entry"></a></td>
</tr>
<tr>
<td>Nov 15, 2012</td>
<td>UVWXYZ</td>
<td><a class="remove-entry"></a></td>
</tr>
</tbody>
</table>
</section>
No sé si estoy haciendo algo diferente de lo que intentabas, pero parece (al menos en la superficie) que es posible producir manualmente plantillas de bigotes / manillares a partir de plantillas de Jade sin conflictos. Podría haber algunos conflictos con plantillas más complejas, pero no he encontrado ninguna.
Yo mismo he estado jugando con esta idea durante bastante tiempo y he estado investigando un poco. Sin embargo, mi principal objetivo fue que realmente me gustaron las simples construcciones lógicas "sin lógica" de los bigotes / manillares y la hermosa reducción de la verbosidad de Haml / Jade, y quería una combinación. Hacia ese fin, parece que una mejor opción podría ser Hamlbars o incluso mejor EmblemJS, con la que estoy experimentando.
Solución: los comentarios HTML de jade.
// {{#entries}}
tr.entry-row(data-id=''{{_id}}'')
td=''{{date}}''
td=''{{title}}''
td
a.edit(title=''Edit'')=''Edit''
a.remove(title=''Delete'')
// {{/entries}}
Funciona de maravilla. Podrías eliminar los comentarios después, pero al menos esto funciona.
Vamos a definir algunos mixins de jade.
mixin if(name)
!= ''{{#'' + name + ''}}''
block
!= ''{{/'' + name + ''}}''
mixin unless(name)
!= ''{{^'' + name + ''}}''
block
!= ''{{/'' + name + ''}}''
mixin each(name)
!= ''{{#'' + name + ''}}''
block
!= ''{{/'' + name + ''}}''
Úsalos con fluidez en tu plantilla de Jade:
section#entry-review-template.template(data-class=''entry-review'')
+unless(''entries'')
h1=''No Posts''
div=''There are no blog posts to review.''
table
thead
tr
th=''Date''
th=''Title''
th
tbody
+each(''entries'')
tr
td=''{{date}}''
td=''{{title}}''
td
a.remove-entry
Se genera un hermoso bigote-HTML.
<section id="entry-review-template" data-class="entry-review" class="template">{{^entries}}
<h1>No Posts</h1>
<div>There are no blog posts to review.</div>{{/entries}}
<table>
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th></th>
</tr>
</thead>
<tbody>{{#entries}}
<tr>
<td>{{date}}</td>
<td>{{title}}</td>
<td><a class="remove-entry"></a></td>
</tr>{{/entries}}
</tbody>
</table>
</section>