2012-10-25 2 views
10

Я хотел бы использовать Усы для отображения неупорядоченного списка HTML, только если объект списка не пуст. Поэтому я хотел бы:Усыновать список усов, если не пуст

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul> 

, если в списке есть элементы и ничего если список пуст (даже не ул теги)

Как я могу это сделать?

редактировать: моя структура данных:

{ "list": ["first item", "second item"] } 
+0

Я считаю, что это то, что вы ищете http://stackoverflow.com/questions/10102931/mustache-templates-how-to-output-a-block-only-once-for-non- empty-lists/10118092 # 10118092 – maxbeatty

+0

Это интересный подход, но я надеялся, что есть способ сделать это без изменения моей структуры данных. –

+0

Не могли бы вы добавить свою структуру данных к своему вопросу? – maxbeatty

ответ

5

Вам необходимо переформатировать структуру данных следующим образом:

{ 
    "list": { 
     "items": ["first item", "second item"] 
    } 
} 

Ваш шаблон Усы теперь будет это

{{#list}} 
    <ul> 
     {{#items}} 
      <li>{{.}}</li> 
     {{/items}} 
    </ul> 
{{/list}} 

I сделал видео, объясняющее, как работает Усы, и как его реализовать, используя как PHP, так и JavaScript. Вы можете найти его здесь: http://mikemclin.net/mustache-templates-for-php-and-javascript/

+2

Кажется, неразумно просить людей переформатировать свои структуры данных для размещения шаблонов язык. – Alper

+1

Согласен. Вот почему я лично выбрал бы другой язык шаблонов. Однако, если вы хотите использовать Усы, вот как. Мне нравится решение ручья лучше, но я не уверен, что свойство 'length' всегда доступно. Я думаю, что это может быть усовершенствование, добавленное реализацией Javascript. Мне не удалось найти упоминание об этом в руководстве Mustache: https://mustache.github.io/mustache.5.html. –

18

Если вы не хотите или не можете переформатировать свои данные, вы также можете просто проверить items.length перед отображением тегов <ul>. Некоторые люди нахмурились, но это определенно альтернатива ответа Майка.

{{#items.length}} 
    <ul> 
     {{items}} 
      <li>{{property}}</li> 
     {{/items}} 
    </ul> 
{{/items.length}} 
+0

Или .size, если вы используете Java-версию –

+0

Я использую чужую api и не могу ее изменить. '.length' работает для меня. –

+0

Просто попробовал это решение на http://trymustache.com/ и получил следующую ошибку: Ошибка усача: Нераскрытый раздел "items.length" на 87 –

Смежные вопросы