Як мені виконати 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

— егерварі
джерело

1

"чому вуса створені таким чином?" Я не надто впевнений, але я думаю, що ідея полягає в тому, що мова шаблонів повинна бути саме такою: мова для написання шаблонів, тобто речі, які виглядають як результат, який вони створюють, просто з отворами, куди йдуть змінні біти. Введення логіки в мову шаблонів ускладнює шаблони, і коли у вас вже є мова програмування для обробки бітів логіки, навіщо турбуватися?

— Пол Д. Уейт

4

@ PaulD.Waite "Логіка менш" насправді означає "невільний код", я думаю. Так само погано вводити в код істинну логіку перегляду, як і вводити логіку без перегляду в шаблон. Вуса намагаються забезпечити мінімальну логіку для цього.

— jpmc26

2

Або використовувати руль замість вусів. Уміння писати, наприклад, {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}є більш читабельним, набагато чистішим і все ще є презентацією. "Без логіки" - це керівництво, воно не повинно бути жакетів.

— лижник

Можливо, це недостатньо універсальний двигун шаблонів, коли ОП каже: "це моя сумна спроба [...] це очевидно неправильно" ... і тоді прийнята відповідь - це копіювальна паста цього коду :). Немає судження щодо ОП та відповіді; просто оmustache

— dwanderson

497

Ось як це робити, якщо / else у вусах (ідеально підтримується):

{{#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

— Енеко Алонсо
джерело

88

Документи з вусами веселі. "Ми називаємо це" менш логічним ", тому що немає операторів if, else, або циклів." Yeeeeaaaaaa ....

— коробку

6

@boxed, технічно ви праві, перевернутий розділ - це логічне твердження, оскільки він перевіряє значення тегів. Але я думаю, що тут є нюанс у тому, що обидва твердження мають бути чітко оцінені, а не окремі, якщо / ще. В основному вуса змушують структуру, if (condition){ //do something}за якою слідує a 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-адресу зображення чи інші засоби масової інформації, які можуть або не змінюватимуться у ваших шаблонах, але потребують певного звикання. Сенс полягає в тому, щоб вивчити бачення тунельного бачення шаблону, URL-адреса img-аватара обов'язково використовуватиметься в інших шаблонах. Чи збираєтесь ви підтримувати цей URL-адрес у шаблонах X або в одному об’єкті ЗАСТОСУВАННЯ? ;)

Ще один варіант - зробити наступне:

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

І в шаблоні:

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

Але це суперечить усьому змісту шаблонів без логіки. Якщо це те, що ви хочете зробити, ви хочете логічно шаблонувати, і ви не повинні використовувати вуса, хоча самі даєте йому неабиякі шанси вивчити цю концепцію;)

— BGerrissen
джерело

Дякую. Це чудова відповідь! Це фактично допомогло мені і з іншими структурними аспектами щодо "коли робити речі" в структурі коду javascript.

— egervari

{{/ # hasAvatar}} і {{/ # noAvatar}} повинні бути {{/ hasAvatar}} і {{/ noAvatar}} у цій відповіді.

— Малун

14

Ваша інша заява повинна виглядати приблизно так (зверніть увагу ^):

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

У вусах це називається "Перевернуті секції".

— анонім
джерело

7

зауважте, що вам не потрібно і #, і ^, це просто ^ для "не" випадку

— zappan

Це не працює в останній версії. Заппан правильний, вам потрібен лише ^

— simonmorley

0

Ви можете визначити помічника у вікні. Однак умовна логіка дещо обмежена. Моксі-трафарет ( https://github.com/dcmox/moxyscript-stencil ), схоже, вирішує це за допомогою "параметризованих" помічників, наприклад:

і в перегляді:

view.isActive = функція (шлях: рядок) {return path === this.path? "class = 'active" ":' '}

— Даніель
джерело

0

Зауважте, ви можете використовувати {{.}}для візуалізації поточного елемента контексту.

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

{{^avatar}}missing{{/avatar}}

— Хафтор
джерело