Я использую mustache.js для визуализации шаблона в javascript. Я хотел бы проверить, пуст ли список или не скрывать тег <h2> в следующем примере. Возможно ли это или isass.js слишком логично-менее?
Это шаблон:
<h2>Persons:</h2>
<ul>
{{#persons}}
{{name}}
{{/persons}}
</ul>
и это данные:
{
"persons":[
{"name": "max"},
{"name": "tom"}
]
}
Чтобы сохранить ваш шаблон без логики, вы можете выполнить эту проверку перед визуализацией шаблона:
// assuming you get the JSON converted into an object
var data = {
persons: [
{name: "max"}
, {name: "tom"}
]
};
data.hasPersons = (data.persons.length > 0);
Затем ваш шаблон будет выглядеть так:
<h2>Persons:</h2>
{{#hasPersons}}
<ul>
{{#persons}}
<li>{{name}}</li>
{{/persons}}
</ul>
{{/hasPersons}}
Вы можете использовать person.length. Если это истинное значение (т.е. Больше 0), тогда будет отображаться блок.
{{#persons.length}}
<h2>Persons:</h2>
<ul>
{{#persons}}
<li>{{name}}</li>
{{/persons}}
</ul>
{{/persons.length}}
После борьбы за полдня с этой проблемой я наконец нашел легкое решение!
Не проверяйте список, но проверьте, не является ли его первый элемент пустым!
Шаблон:
{{#persons.0}}
<h2>Persons:</h2>
<ul>
{{#persons}}
<li>{{name}}</li>
{{/persons}}
</ul>
{{/persons.0}}
{{^persons.0}}No persons{{/persons.0}}
Данные:
{
"persons":[
{"name": "max"},
{"name": "tom"}
]
}
Вывод:
<h2>Persons:</h2>
<ul>
<li>max</li>
<li>tom</li>
</ul>
Данные:
{
"persons": []
}
Вывод:
"No Persons"
Используйте handlebars. Это надмножество Усы, которое дает вам немного больше энергии, которая вам нужна. Сообщество усов попросило эту функцию, но сопровождающий отказался вставить его.
В javascript вы можете проверить с помощью {{#names.length}}{{/names.length}} или с помощью {{#names.0}}
Если вы находитесь за пределами javascript (например, в pystache или Scalate), вам не повезло. Единственным решением тогда является введение отдельного булева или вложение вашего массива в объект, который вы полностью избегаете, если у вас есть пустой массив, например maxbeatty.