mustache.jsでif / elseを実行するにはどうすればよいですか？

258

口ひげでこれを行う方法を理解できないのはかなり奇妙に思えます。サポートされていますか？

これは私の悲しい試みです：

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

これは明らかに正しくありませんが、ドキュメントではこのようなことは何も述べられていません。「else」という言葉は言及されていません:(

また、なぜ口ひげはこのように設計されているのですか？この種のことは悪いと考えられていますか？モデル自体にデフォルト値を設定することを強制しようとしていますか？それが不可能な場合はどうですか？

javascript templates mustache

— egervari
ソース

1

「なぜ口ひげはこのように設計されているのですか？」よくわかりませんが、テンプレート言語はテンプレートを作成するための言語、つまり、テンプレートが作成する出力のように見えるもので、可変ビットの行き先に穴があるだけであるという考え方だと思います。ロジックをテンプレート言語で配置すると、テンプレートがより複雑になります。ロジックビットを処理するプログラミング言語をすでに持っているのに、なぜ煩わしいのでしょうか。

— ポールD.ウェイト2013

4

@ PaulD.Waite「ロジックレス」は本当に「非任意のコード」を意味すると思います。テンプレートにビュー以外のロジックを配置するのと同じくらい、コードに真のビューロジックを配置するのは同じくらい悪いことです。Moustacheはそれを実現するための最小限のロジックを提供しようとします。

— jpmc26 2014

2

または口ひげの代わりにハンドルバーを使用します。書くことができる、例えば{{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}もっと読みやすく、ずっときれいで、まだプレゼンテーションです。「ロジックレス」はガイドラインであり、拘束衣である必要はありません。

— スキーヤーページ2015

OPが「これは私の悲しい試みです[...]これは明らかに正しくない」と言った場合、多目的に十分なテンプレートエンジンではない可能性があります。OPや回答に対する判断はありません。ちょうどmustache

— dwanderson

498

これは、Mustacheでif / 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

— エネコアロンソ
ソース

89

口ひげのドキュメントは陽気です。「ifステートメント、else句、forループがないため、これを「ロジックレス」と呼びます。」Yeeeeaaaaaa ....

— ボックス化

6

@boxed、技術的にはあなたが正しい、反転されたセクションはタグ値をチェックするため、論理的なステートメントです。ただし、ここでのニュアンスは、単一のif / elseではなく、両方のステートメントを明示的に評価する必要があるということです。基本的に、口ひげif (condition){ //do something}はif (!condition){//do something else}。が後に続く構造を強制します。また、ロジックベースの言語と比較して、ロジックで実行できるロジックの量は非常に少なくなります。存在または非存在が唯一のチェックです。つまり、タグの値が5に等しいかどうかをチェックしてから、そのタグのコードに分類することはできません。

— MandM 2015年

22

@MandMええ...ロジックはありますが、便利なことは何もできません：P

— ボックス化

それ以外の場合はロジックをいじるのを防ぐだけです。別のif / else内に多くのネストされたif / elseがあることは、設計ミスの兆候です

— Tebe

@boxedはmoustache.jsでforループを実行できます（少なくとも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や他のメディアを維持するよりもはるかに優れていますが、慣れるには時間がかかります。ポイントは、テンプレートトンネルビジョンを学習しないことです。アバターのimg urlは、他のテンプレートで使用されるようバインドされています。Xテンプレートまたは単一のDEFAULTS設定オブジェクトでそのurlを維持しますか？;）

別のオプションは、以下を実行することです：

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

そしてテンプレートで：

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

しかし、それは論理のないテンプレートの全体的な意味に反しています。それがあなたがしたいことなら、あなたは論理的なテンプレートを望み、Mustacheを使うべきではありませんが、この概念を学ぶチャンスを自分に与えてください;）

— BGerrissen
ソース

ありがとう。それは素晴らしい反応です！それは実際に、JavaScriptコードの構造で「いつ行うか」に関する他の構造的側面にも役立ちました。

— egervari

この回答では、{{/＃hasAvatar}}と{{/＃noAvatar}}は{{/ hasAvatar}}と{{/ noAvatar}}である必要があります。

— Mulhoon 2012

14

あなたの他のステートメントは、（注意次のようになります^）：

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

口ひげでは、これは「反転セクション」と呼ばれます。

— 匿名
ソース

7

ノートあなたが＃と^の両方を必要としないこと、それだけで^「ではない」場合のためだ

— zappan

これは最新バージョンでは機能しません。Zappanは正解です。^のみが必要です

— simonmorley 2013年

0

ビューでヘルパーを定義できます。ただし、条件付きロジックは多少制限されます。Moxy-Stencil（https://github.com/dcmox/moxyscript-stencil）は、「パラメータ化された」ヘルパーでこれに対処しているようです。例：

そしてビューで：

view.isActive = function（path：string）{return path === this.path？"class = 'active'"： ''}

— ダニエル
ソース

0

を使用{{.}}して、現在のコンテキスト項目をレンダリングできます。

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

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

— ハフソール
ソース