Kierownica.js Else If

Zwykle używam tej formy:

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

Duch kierownicy polega na tym, że jest ona "bez logiki". Czasami sprawia to, że czujemy się, jakbyśmy z tym walczyli, a czasami kończymy z brzydką zagnieżdżoną logiką if / else. Możesznapisać helpera; Wiele osób rozszerza kierownicę o" lepszy " operator warunkowy lub uważa, że powinna ona być częścią rdzenia . Myślę jednak, że zamiast tego,

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

Możesz chcieć uporządkować rzeczy w swoim modelu, tak, że możesz mieć to,

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

Po prostu upewnij się że tylko jedna z tych flag jest zawsze prawdziwa. Są szanse, że jeśli używasz tego if/elsif/else, prawdopodobnie używasz go również gdzie indziej, więc te zmienne mogą nie skończyć się zbędne.

Kierownica obsługuje teraz {{else if}} od wersji 3.0.0. Dlatego Twój kod powinien teraz działać.

Możesz zobaczyć przykład pod " conditionals "(nieco zmienione tutaj z dodanym {{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

Napisałem tego prostego pomocnika:

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);
  }
});

To coś w rodzaju Łańcuch odpowiedzialności wzór na kierownicy

Przykład:

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

To nie else if ale w niektórych przypadkach może Ci pomóc)