Как мне выполнить if / else в mustache.js?

258

Кажется довольно странным, что я не могу понять, как это сделать с усами. Это поддерживается?

Это моя грустная попытка:

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

Это, очевидно, неправильно, но в документации ничего подобного не упоминается. Слово «еще» даже не упоминается :(

Кроме того, почему усы разработаны таким образом? Такого рода вещи считаются плохими? Это пытается заставить меня установить значение по умолчанию в самой модели? Как насчет случаев, когда это невозможно?

javascript templates mustache egervari
источник
1
"почему усы устроены именно так?" Я не слишком уверен, но я думаю, что идея состоит в том, что язык шаблонов должен быть именно таким: язык для написания шаблонов, то есть вещей, которые выглядят как вывод, который они производят, просто с отверстиями, куда идут переменные биты. Помещение логики в язык шаблонов делает шаблоны более сложными, и когда у вас уже есть язык программирования для обработки логических битов, зачем беспокоиться?
Пол Д. Уэйт
4
@ PaulD.Waite «Без логики» действительно означает «не произвольный код», я думаю. Вводить в код истинную логику представления так же плохо, как и вводить логику без представления в шаблон. Усы пытаются обеспечить минимум логики для достижения этой цели.
jpmc26
2
Или используйте руль вместо усов. Возможность писать, например {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}, более читабельна, намного чище, и все еще остается презентацией. «Без логики» - это руководство, оно не должно быть смирительной рубашкой.
skierpage
Может быть, это не достаточно универсальный шаблонизатор, когда OP говорит: «Это моя грустная попытка [...] это, очевидно, неправильно» ... и тогда принятый ответ - копия этого кода :). Нет суждения по ОП или ответу; только чтоmustache
dwanderson

Ответы:

498

Вот как вы делаете if / else в Mustache (отлично поддерживается):

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

Или в вашем случае:

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

Ищите перевернутые разделы в документах: https://github.com/janl/mustache.js

Энеко Алонсо
источник
89
Усы документы веселые. «Мы называем это« без логики », потому что нет операторов if, else или for for loop». Дааааааа ....
штучной упаковке
6
@boxed, технически вы правы, перевернутая секция является логическим утверждением, так как она проверяет значение тега. Но я думаю, что нюанс здесь заключается в том, что оба утверждения должны быть явно оценены, а не одно if / else. В основном, усы заставляют структуру if (condition){ //do something}следовать за if (!condition){//do something else}. Кроме того, количество логики, которую можно выполнять в логике, чрезвычайно уменьшено по сравнению с языком на основе логики. Существование или несуществование являются единственными проверками, т.е. вы не можете проверить, равно ли значение тега 5, и затем попасть в код этого тега.
MandM
22
@MandM да ... так что у него есть логика, но он ничего не может сделать полезного: P
штучной упаковке
Это просто мешает вам возиться с логикой. Имея много вложенных если / другое внутри другого , если / другое является признаком misdesign
Теб
@boxed вы можете сделать для цикла с moustache.js (по крайней мере, цикл ngFor-ish)
aloisdg переходит на codidact.com
54

Это то, что вы решаете в «контроллере», что является точкой логических шаблонов.

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

На самом деле это НАМНОГО лучше, чем сохранение URL-адресов изображений или других носителей, которые могут измениться или не измениться в ваших шаблонах, но к этому нужно привыкнуть. Смысл в том, чтобы отучить видение туннеля от шаблонов, аватар img url обязательно будет использоваться в других шаблонах, собираетесь ли вы сохранить этот URL в шаблонах X или в отдельном объекте настроек DEFAULTS? ;)

Другой вариант - сделать следующее:

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

И в шаблоне:

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

Но это идет вразрез со всем смыслом логических шаблонов. Если это то, что вы хотите сделать, вы хотите логических шаблонов и не должны использовать усы, хотя сами дайте себе шанс изучить эту концепцию;)

BGerrissen
источник
Спасибо. Это отличный ответ! Это на самом деле помогло мне и с другими структурными аспектами о том, «когда делать вещи» в структуре кода javascript.
Эгервари
{{/ # hasAvatar}} и {{/ # noAvatar}} должны быть {{/ hasAvatar}} и {{/ noAvatar}} в этом ответе.
Малхун
14

Ваше утверждение else должно выглядеть следующим образом (обратите внимание ^):

{{^avatar}}
 ...
{{/avatar}}

В усах это называется «перевернутые участки».

аноним
источник
7
обратите внимание, что вам не нужны и #, и ^, это просто ^ для случая "не"
zappan
Это не работает в последней версии. Заппан прав, вам нужен только ^
simonmorley
0

Вы можете определить помощника в представлении. Однако условная логика несколько ограничена. Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ), кажется, решает эту проблему с помощью «параметризованных» помощников, например:

{{isActive param}}

и в представлении:

view.isActive = function (path: string) {return path === this.path? "class = 'active'": ''}

Даниил
источник
0

Обратите внимание, вы можете использовать {{.}}для визуализации текущего элемента контекста.

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}
Hafthor
источник