Контент-зависимые шаблоны / частичные с moustache.js

Question

Я хотел бы использовать moustache.js для рендеринга следующей структуры JSON:

[
  {type:'img', src:'some_url'},
  {type:'text', text:'lorem ipsum ...'},
  {type:'link', href:'some_url', label:'click here'},
  //  more entries ...
]

Я бы хотел отобразить каждый элемент в зависимости от типа: img должен отображаться как <img src="{{src}}">, текст как <p>{{text}}</p> и т. Д. Возможно ли это с moustache.js или я должен свернуть свою собственную систему шаблонов? Если это возможно, как будет выглядеть шаблон и как я должен расширить структуру JSON, чтобы он работал как представление усов?

Answer 1

Да, это абсолютно возможно.

Вы могли бы сделать что-то вроде

{{#myarray}} {{! loop through array}}
{{#src}} {{! if you have src it must be an img}}
  <img src="{{src}}">
{{/src}}  
{{#text}} {{! if you have text is must be a paragraph}}
  <p>{{text}}{{/p}}
{{/text}}
{{#href}}} {{! if you have an href is must be an anchor}}
  <a href="{{href}}">{{label}}</a>
{{/href}}
{{/myarray}}

Нет причин расширять json, если поля уникальны для определенного типа выходных данных. Вы можете просто проверить, существует ли поле, и затем, если оно существует, оно должно быть выведено определенным образом.

Другая вещь, которую вы можете сделать вместо того, чтобы иметь поле 'type', это установить json с различными флагами, на которых будет основан ваш шаблон (например, 'is_image: true', 'is_anchor: true' и т. Д.).