web-dev-qa-db-ja.com

Handlebars.jsその他の場合

クライアントサイドのビューレンダリングにHandlebars.jsを使用しています。 Elseがうまく機能しているのにELSE IFを必要とする3方向の条件付き条件に出会った場合

これはうまくいきません。

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

Handlebarsは3.0.0から{{else if}}ブロックをサポートします。

ハンドルバー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}}
343
Carl

私は通常このフォームを使います：

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

ハンドルバーの精神はそれが "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}}

これらのフラグの1つのみが常に正しいことを確認してください。あなたがあなたのビューでこのif/elsif/elseを使っているのであれば、おそらく他の場所でそれを使っているかもしれないので、これらの変数は不必要に終わることはないかもしれません。

無駄のないようにしてください。

38
Ziggy

ハンドルバーは3.0.0から{{else if}}をサポートします。したがって、あなたのコードは動作するはずです。

あなたは "条件付き"の下に例を見ることができます（追加された{{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

36
Don O

私はこの単純なヘルパーを書きました：

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

それは でなければ ではありませんが、場合によっては役に立ちます。

5
Kirill Ermolov