Handlebars.js Ще якщо

241

Я використовую Handlebars.js для візуалізації подання з боку клієнта. Якщо Else працює чудово, але я зіткнувся з 3-ма умовними умовами, які вимагають ELSE IF:

Це не працює:

{{#if FriendStatus.IsFriend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

Як зробити ELSE IF за допомогою керма?

handlebars.js

— Досягають4ланців
джерело

Слідкуйте за оновленнями керма, здається, це буде впроваджено незабаром: github.com/wycats/handlebars.js/pull/892

— Jacob van Lingen

376

Руль підтримує {{else if}}блоки станом на 3.0.0.

Ручки v3.0.0 або новіші:

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

Перед Handlebars v3.0.0, однак, вам доведеться визначити помічника, який обробляє логіку розгалуження, або ifоператори гніздування вручну:

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

— Карл
джерело

6

сенс у тому, щоб не мати elsif (інакше, якщо) в руль, що ви вкладаєте занадто багато логіки у свій шаблон. Іншими словами, вам потрібно розбити його на менші шаблони?

— Казим Заїді

1

@KazimZaidi, що робити, якщо у вас є цілий фрагмент даних з більш ніж трьома станами, що вимагає різного форматування у кожному випадку? Можливо, вам вдасться примусити стиль CSS до самих даних, але тоді ви підштовхуєте проблеми на рівні перегляду до своїх даних. Я можу уявити розумні випадки для конструкції if / elseif / endif (або навіть комутатора / відповідності).

— Дрю Ноакс

1

дивлячись на це ще раз, я відчуваю, що це можна зробити через прив’язки атрибутів.

— Казим Заїді

1

Я вважаю, що кращим методом є передача булевих прапорів та кондиціонування їх. Ви повинні правильно встановити прапори таким чином, що лише одна умова визначається як істинна. Не потрібноelse if

— човен

Я рекомендую зробити це за допомогою допоміжної функції, щоб відокремити бізнес-логіку від презентації.

— Макс Ходжес

76

Зазвичай я використовую цю форму:

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}

— доктор
джерело

Гарна порада, дякую. Це реагуватиме за замовчуванням?

— kylemclaren

2

Виглядає досить лише з одним іншим, але, чим більше у вас є, тим довший останній список закриття, якщо потрапляє -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— jbyrd

1

Ні, це не "чистіше", але бридкіше.

— ген b.

37

Тепер підтримується рульова панель, {{else if}}починаючи з 3.0.0. Тому ваш код зараз повинен працювати.

Ви можете бачити приклад у розділі "умовні умови" (трохи переглянуті тут із додаванням {{else}}:

    {{#if isActive}}
      <img src="star.gif" alt="Active">
    {{else if isInactive}}
      <img src="cry.gif" alt="Inactive">
    {{else}}
      <img src="default.gif" alt="default">
    {{/if}}

http://handlebarsjs.com/block_helpers.html

— Дон О
джерело

4

Це має бути нова відповідь!

— Саад Малик

не працює для мене (синтаксична помилка в шаблоні). Метеор 1.2.0.2

— dragonmnl

@dragonmnl Яку версію рульових механізмів використовує Meteor 1.2.0.2? Переконайтеся, що ви використовуєте 3.0.

— Дон О

Я використовую версію за замовчуванням. Як перевірити версію рулі?

— dragonmnl

@dragonmnl Схоже, що Метеор використовує власну мову шаблонів під назвою Пробіли . Якщо це так, то я не впевнений, що він підтримує {{else if}}синтаксис.

— Дон О

37

Дух ручки полягає в тому, що це "logicless". Іноді це дає нам відчути, що ми боремося з цим, а іноді ми стикаємось з потворною вкладеною логікою if / else. Ви могли написати помічника; багато людей збільшують рульове управління з «кращим» умовним оператором або вважають, що воно повинно бути частиною ядра . Я думаю, що замість цього,

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

ви можете розташувати речі у вашій моделі, щоб ви могли мати це,

{{#if is_friend }}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}

{{#if is_not_friend_yet }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}

{{#if will_never_be_my_friend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

Просто переконайтесь, що лише один із цих прапорів коли-небудь справжній. Швидше за все, якщо ви цим користуєтесьif/elsif/else у вашому представленні, ви, ймовірно, використовуєте його ще десь, тому ці змінні можуть бути не зайвими.

Тримайте його нахилом.

— Зіггі
джерело

1

Я не впевнений, наскільки це добре, але сьогодні я придумав обробку 3 різних станів перегляду, і я в кінцевому підсумку використовував рішення, засноване на цьому (їх логіка не потрібна, оскільки вони все перевіряють одне значення) stackoverflow.com/questions/15008564/… Отже, замість #if _is_friend ви можете використовувати рядок із дуже простим помічником (у їхній відповіді); #if friend_type "is_friend" та #if friend_type "is_not_friend_yet"

— Ділан Рейх

Ця відповідь - це те, що я вважав би найкращим рішенням попередньо рульове управління 3.0, я думаю, що додатковий HTML кращий на відміну від спроб утиснути логіку у дерево DOM.

— Девід О'Реган

7

Я написав цього простого помічника:

Handlebars.registerHelper('conditions', function (options) {
    var data = this;
    data.__check_conditions = true;
    return options.fn(this);
});


Handlebars.registerHelper('next', function(conditional, options) {
  if(conditional && this.__check_conditions) {
      this.__check_conditions = false;
      return options.fn(this);
  } else {
      return options.inverse(this);
  }
});

Це щось на зразок схеми ланцюжка відповідальності в рулях

Приклад:

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

Це не інше, якщо, але в деяких випадках це може вам допомогти)

— Кирило Єрмолов
джерело

1

Вбудовані помічники

#if

Ви можете використовувати помічник if для умовного відтворення блоку. Якщо його аргумент повертає значення false, undefined, null, "", 0 або [], Ручки не будуть блокувати рендерінг.

шаблон

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

Коли ви передасте наступний вхід до вищевказаного шаблону

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}

— Абдо-хост
джерело

0

Привіт, у мене є лише редакція назви МІНОРУ, і до цих пір я це розголосив. я думаю, що мені потрібно передати помічнику в декількох полях,

server.js

app.engine('handlebars', ViewEngine({
        "helpers":{
                isActive: (val, options)=>{
                    if (val === 3 || val === 0){
                        return options.fn(this)
                    }
                } 
        }
}));

header.handlebars

<ul class="navlist">
          <li   class="navitem navlink {{#isActive 0}}active{{/isActive}}"
                ><a href="#">Home</a></li>
          <li   class="navitem navlink {{#isActive 1}}active{{/isActive}}"
                ><a href="#">Trending</a></li>
          <li   class="navitem navlink {{#isActive 2}}active{{/isActive}}"
                ><a href="#">People</a></li>
          <li   class="navitem navlink {{#isActive 3}}active{{/isActive}}"
                ><a href="#">Mystery</a></li>
          <li class="navitem navbar-search">
            <input type="text" id="navbar-search-input" placeholder="Search...">
            <button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
          </li>
        </ul>

— Мадоки
джерело