Еще раз: Handlebars.js If
Я использую 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 с ручками?
Ответы
Ответ 1
Handlebars поддерживает {{else if}}
блоки с 3.0.0.
Handlebars 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}}
Ответ 2
Я обычно использую эту форму:
{{#if FriendStatus.IsFriend}}
...
{{else}} {{#if FriendStatus.FriendRequested}}
...
{{else}}
...
{{/if}}{{/if}}
Ответ 3
Дух рулей заключается в том, что он "безбратен". Иногда это заставляет нас чувствовать, что мы сражаемся с ним, и иногда мы заканчиваем уродливую вложенную логику 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
в своем представлении, вы, вероятно, используете его и в другом месте, поэтому эти переменные могут оказаться излишними.
Держите его в покое.
Ответ 4
Handlebars теперь поддерживает {{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
Ответ 5
Я написал этот простой помощник:
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);
}
});
Это что-то вроде шаблона Chain Of Responsibility в Handlebars
Пример:
{{#conditions}}
{{#next condition1}}
Hello 1!!!
{{/next}}
{{#next condition2}}
Hello 2!!!
{{/next}}
{{#next condition3}}
Hello 3!!!
{{/next}}
{{#next condition4}}
Hello 4!!!
{{/next}}
{{/conditions}}
Это не другое, если в некоторых случаях это может вам помочь)