web-dev-qa-db-ja.com

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

これを口ひげの中でどうやってやればいいのかわからないのはちょっと変に思えます。サポートされていますか？

これが私の悲しい試みです。

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

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

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

javascripttemplatesmustache
235
egervari

これはMoustacheの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

457
Eneko Alonso

これは、「コントローラ」で解決するもので、これは論理的なテンプレートのポイントです。

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

}

これは実際にはLOTであり、あなたのテンプレートでは変更されるかもしれないし変更されないかもしれないが画像のURLや他のメディアを維持するよりはましですが、慣れるのにいくらか時間がかかります。ポイントはテンプレートのトンネルビジョンを学習解除することです。アバターの画像URLは他のテンプレートで使用されることになっています。あなたはそのURLをXテンプレートまたは単一のDEFAULTS設定オブジェクトで維持するつもりですか？ ;）

もう1つの選択肢は、次のとおりです。

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

そしてテンプレートでは：

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

しかし、それは論理的なテンプレートの全体的な意味に反しています。それがあなたがやりたいことであれば、あなたは論理的なテンプレートが欲しいので、あなたはMustacheを使うべきではありません。

52
BGerrissen

あなたのelse文はこのようになるはずです（^に注意してください）：

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

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

14
anonym