Это мой jade figurine:
section#entry-review-template.template(data-class='entry-review')
table
thead
tr
th='Date'
th='Title'
th
tbody
Когда я начинаю добавлять mustache к нему, я чувствую, что он начинает терять свою обычную грацию, так как теперь она становится очень придирчивой к любому поры в ее лице.
{{^entries}}
h1='No Posts'
div='There are no blog posts to review.'
{{/entries}}
Однако, когда я пытаюсь добавить последний кусочек усов, к ее телу на этот раз, она начинает жаловаться, и она либо ломается, либо не хочет помогать, либо просто создает беспорядок.
{{#entries}}
tr
td='{{date}}'
td='{{title}}'
td
a.remove-entry
{{/entries}}
Результат:
{{^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}}
Я не могу заставить jade правильно выводить свой текст с усами.
Это приложение node.js, которое использует jade для шаблонирования моих просмотров на стороне сервера, я не передаю никакие модели ни одному из моих представлений (такой тяжелый подъем я оставляю на стороне клиента), но мне все равно нужно делать кучу inclue partial повсюду. И у меня много нефрита. И я вроде люблю нефрит. Я не хочу ее отпускать.
Теперь я хочу реализовать очень простые шаблоны усов на стороне клиента, и я хотел бы, чтобы они были встроенными в мои представления.
Конечно, я мог бы обойти это, и иметь их в тегах script или визуализировать их с помощью другого механизма просмотра (теперь, когда я думаю об этом, он даже не чувствует себя легко или просто) но тогда мне пришлось бы писать raw html для них, и я вроде хотел бы смешивать лучшее из обоих миров.
{{#must}} {{/ache}}?Я действительно хочу, чтобы нефрит носил усы. Я знаю его странно, но он меня включит.
Я просто попробовал использовать |, документированный здесь, но даже самый простой
section#entry-review-template.template(data-class='entry-review')
table
thead
tr
th='Date'
th='Title'
th
tbody
| {{#entries}}
| {{/entries}}
заканчивается вывод:
{{#entries}}
{{/entries}}
<table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table><h1></h1>
Решение: jade Комментарии HTML
// {{#entries}}
tr.entry-row(data-id='{{_id}}')
td='{{date}}'
td='{{title}}'
td
a.edit(title='Edit')='Edit'
a.remove(title='Delete')
// {{/entries}}
работает как шарм. вы можете удалить комментарии после этого, но это, по крайней мере, делает трюк.
Определим некоторые смесители Jade.
mixin if(name)
!= '{{#' + name + '}}'
block
!= '{{/' + name + '}}'
mixin unless(name)
!= '{{^' + name + '}}'
block
!= '{{/' + name + '}}'
mixin each(name)
!= '{{#' + name + '}}'
block
!= '{{/' + name + '}}'
Используйте их свободно в шаблоне 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
Создается красивый усы-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>
Хорошо, так что это может быть слишком поздно, чтобы быть полезным, и уже есть принятый ответ (там, где BTW я не совсем понял, что "может удалить комментарии", действительно означало там). Тем не менее, я думал, что это может быть полезно для всех в будущей работе, поэтому вот что я нашел до сих пор.
Взяли небольшие фрагменты из вашего кода выше и поместили их в пример, используя тот же простой синтаксис "текстового вывода", который, по-видимому, дал вам странный беспорядочный вывод:
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}}
Поместите его в поле редактирования на реальном сайте Jade (http://naltatis.github.com/jade-syntax-docs) и получим результат от Jade как:
<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>
Затем он попробовал это на сайте TryHandlebars (http://tryhandlebarsjs.com) со следующими данными:
{ "entries" :
[
{ "date" : "Jan 2, 2010", title: "ABCDEF" },
{ "date" : "Nov 15, 2012", title: "UVWXYZ" }
]
}
И он выполнен правильно со следующим выходом:
<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>
Я не знаю, делаю ли я что-то отличное от того, что вы пытались, но кажется (по крайней мере, на поверхности), что можно вручную создавать шаблоны Mustache/Handlebars из шаблонов Jade без конфликтов. Там могут быть конфликты с более сложными шаблонами, но я их не нашел.
Я уже давно занимался этой идеей, и я уже много рылся. Однако моим главным драйвером были то, что мне нравились простые "логические" логические конструкции Mustache/Handlebars и прекрасное сокращение детализации Haml/Jade, и мне нужна комбинация. С этой целью кажется, что лучшим вариантом может быть Hamlbars или даже лучше EmblemJS, с которым я экспериментирую.
Emblem.js может быть альтернативой подходу Jade/Mustache, поскольку, похоже, он делает что-то очень похожее. Однако для этого требуется Ember.js.