290

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

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

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

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

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

4

5 に答える 5

554

これは、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#inverted-sections

于 2011-06-25T16:25:35.997 に答える
57

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

// 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 を使うべきではありませんが、この概念を学ぶ機会を自分自身に与えてください ;)

于 2011-05-17T08:03:20.460 に答える
14

Your else statement should look like this (note the ^):

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

In mustache this is called 'Inverted sections'.

于 2011-06-21T14:51:54.823 に答える
0

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

{{isActive パラメータ}}

そしてビューで：

view.isActive = 関数 (パス: 文字列){ リターン パス === this.path ? "class='active'": '' }

于 2020-01-24T02:24:21.433 に答える