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

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

Это моя печальная попытка попробовать:

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

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

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


javascript templates mustache
person egervari    schedule 17.05.2011    source источник
comment
почему усы так устроены? Я не совсем уверен, но я думаю, что идея заключается в том, что язык шаблонов должен быть именно таким: языком для написания шаблонов, то есть вещей, которые выглядят как результат, который они производят, только с дырками, в которых идут переменные биты. Включение логики в язык шаблонов делает шаблоны более сложными, и если у вас уже есть язык программирования для обработки логических битов, зачем беспокоиться?   -  person Paul D. Waite    schedule 06.09.2013
comment
@ PaulD.Waite Я думаю, что на самом деле без логики означает непроизвольный код. Помещать истинную логику представления в код так же плохо, как помещать логику без представления в шаблон. Усы пытается предоставить минимум логики для достижения этой цели.   -  person jpmc26    schedule 21.08.2014
comment
Или используйте руль вместо усов. Умение писать, например {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}} более читабелен, намного чище и по-прежнему представляет собой представление. Отсутствие логики - это ориентир, это не обязательно должна быть смирительная рубашка.   -  person skierpage    schedule 28.07.2015
comment
Может быть, это недостаточно универсальный шаблонизатор, когда ОП говорит, что это моя печальная попытка [...] это явно неверно ... и тогда принятый ответ - это копипаст этого кода :). Нет суждения по OP или ответа; только на mustache   -  person dwanderson    schedule 21.09.2017
comment
если вы используете PHP, попробуйте sm-mustache, я реализовал блок | else, чтобы убрать эти лишние объявления ..   -  person Michael Quad    schedule 05.07.2021

Ответы (5)


arrow_upward
533
arrow_downward

Вот как вы делаете 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#inverted-sections

person Eneko Alonso    schedule 25.06.2011
comment
Документы с усами веселые. Мы называем это без логики, потому что здесь нет операторов if, предложений else или циклов for. Даааааааааааааааааааааааааааааааа .... - person boxed; 10.11.2015
comment
@boxed, технически вы правы, перевернутая секция является логическим утверждением, поскольку она проверяет значение тега. Но я думаю, что нюанс здесь в том, что должны быть явно оценены оба утверждения, а не одно if / else. По сути, усы заставляют структуру if (condition){ //do something}, за которой следует if (!condition){//do something else}. Кроме того, количество логики, которую можно выполнять в логике, чрезвычайно сокращено по сравнению с языком, основанным на логике. Существование или несуществование - единственные проверки, то есть вы не можете проверить, равно ли значение тега 5, а затем попасть в код этого тега. - person MandM; 13.11.2015
comment
@MandM да ... так что в нем есть логика, но он просто не может сделать ничего полезного: P - person boxed; 05.01.2016
comment
Это просто не дает вам возиться с логикой if else. Наличие большого количества вложенных if / else внутри другого if / else является признаком неправильного проектирования - person Tebe; 13.12.2017
comment
@boxed вы можете сделать цикл с помощью moustache.js (по крайней мере, цикл ngFor-ish) - person aloisdg; 22.06.2018
comment
в основном мне нужно что-то вроде этого ‹li class = {{^ self.link}} noLink {{^ self.link}} {{^ self.detail}} noDetail {{^ self.detail}}› означает, что какой-то объект доступен добавление имени класса, но как это сделать с усами? - person iKamy; 01.12.2018
comment
В Moustache нет логики, потому что он действительно заставляет вас выносить бизнес-логику за пределы представления, что хорошо. Если вам интересно, как сделать if / else в представлении, вы, скорее всего, делаете это неправильно, и вам следует переместить эту логику в контроллер. Такой рефакторинг делает представления намного чище и проще. - person laurent; 13.12.2020

arrow_upward
57
arrow_downward

Это то, что вы решаете в «контроллере», а именно в бессмысленном создании шаблонов.

// 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-адресов изображений или других носителей, которые могут или не могут измениться в ваших шаблонах, но к ним нужно привыкнуть. Дело в том, чтобы отучиться от шаблонного туннельного видения, URL-адрес img аватара обязательно будет использоваться в других шаблонах, собираетесь ли вы поддерживать этот URL-адрес в шаблонах X или в одном объекте настроек DEFAULTS? ;)

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

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

И в шаблоне:

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

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

person BGerrissen    schedule 17.05.2011
comment
Спасибо. Отличный ответ! На самом деле это помогло мне и с другими структурными аспектами, касающимися того, когда что-то делать в структуре кода javascript. - person egervari; 17.05.2011
comment
{{/ # hasAvatar}} и {{/ # noAvatar}} должны быть в этом ответе {{/ hasAvatar}} и {{/ noAvatar}}. - person Mulhoon; 22.08.2012

arrow_upward
14
arrow_downward

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

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

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

person anonym    schedule 21.06.2011
comment
обратите внимание, что вам не нужны оба символа # и ^, это просто ^ для случая 'not' - person zappan; 28.09.2011
comment
Это не работает в последней версии. Заппан прав, вам нужен только ^ - person simonmorley; 11.01.2013

arrow_upward
6
arrow_downward

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

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

{{^avatar}}missing{{/avatar}}
person Hafthor    schedule 26.05.2020

arrow_upward
0
arrow_downward

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

{{isActive param}}

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

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

person Daniel    schedule 24.01.2020