Работа с пустым списком в mustache.js - PullRequest
Новая
       34

Работа с пустым списком в mustache.js

27 голосов
/ 05 января 2012

Я использую mustache.js для рендеринга шаблона в javascript. Я хотел бы проверить, является ли список пустым или нет, чтобы скрыть тег <h2> в следующем примере. Возможно ли это или mustache.js слишком логичен?

Это шаблон: 

<h2>Persons:</h2>
<ul>
  {{#persons}}
    {{name}}
  {{/persons}}
</ul>

и это данные: 

{
  "persons":[
    {"name": "max"},
    {"name": "tom"}
  ]
}

Ответы [ 5 ]

41 голосов
/ 21 января 2013

Вы можете использовать лиц. Длина.Если это истинное значение (т. Е. Больше 0), то блок будет обработан. 

{{#persons.length}}
<h2>Persons:</h2>
<ul>
  {{#persons}}
    <li>{{name}}</li>
  {{/persons}}
</ul>
{{/persons.length}}
36 голосов
/ 19 января 2013

После полдня борьбы с этой проблемой я наконец нашел простое решение!

Не проверять список, но проверять, не пуст ли его первый элемент!

Шаблон: 

{{#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"
29 голосов
/ 21 марта 2012

Чтобы сохранить ваш шаблон без логики, вы можете сделать эту проверку перед рендерингом шаблона: 

// 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}}
6 голосов
/ 22 января 2012

Используйте взамен руль .Это надстройка усов, которая дает вам немного больше энергии, которая вам нужна.Сообщество усов попросило эту функцию, но сопровождающий отказывается указывать ее в .

4 голосов
/ 24 июля 2013

В javascript вы можете проверить с помощью {{#names.length}}{{/names.length}} или {{#names.0}}

Если вы находитесь за пределами javascript (например, в pystache или Scalate), вам не повезло. Тогда единственное решение состоит в том, чтобы ввести отдельное логическое значение или вложить ваш массив в объект, которого вы полностью избегаете, если у вас есть пустой массив, как предложено maxbeatty.

...