9

リソースは次のとおりです。

JSON

{
  "badges":{
    "unlocked": [
      {"name": "Win 1"},
      {"name": "Win 2"},
      {"name": "Win 3"}
    ],
    "locked":[
      {"name": "Lose 1"},
      {"name": "Lose 2"},
      {"name": "Lose 3"}
    ]
  }
}

アルゴリズム

{{ if_has_badges }}
<div class="badges">
  <h1>Badges</h1>

  {{ if_has_badges_unlocked }}
    <div class="badges-unlocked">
      <h2>Unlocked!</h2>
      {{ loop_badges_unlocked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{ end_loop_badges_unlocked }}
    </div>
  {{ end_if_has_badges_unlocked }}

  {{ if_has_badges_locked }}
    <div class="badges-locked">
      <h2>Locked!</h2>
      {{ loop_badges_locked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{ end_loop_badges_locked }}
    </div>
  {{ end_if_has_badges_locked }}

</div>
{{ end_if_has_badges }}

Mustache コンパイラで動作するようにこのアルゴリズムを作成するにはどうすればよいですか?

1 つは RubyOnRails アプリケーションで、もう 1 つはクライアント側 (JavaScript) です。

4

2 に答える 2

13

あなたの問題には2つの解決策があります。

選択と反転選択の使用

口ひげのドキュメントの例を次に示します。

{
  "repos": []
}

テンプレート：

{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}

出力：

No repos :(

ご覧のとおり、反転した選択により、条件付きロジックを実行できます。あなたの場合、次のようになります。

ジョンソン:

var viewModel = {
    badges:[]//badges here
}
viewModel.anyBadges = badges.length >0;

口ひげ：

    <div class="badges-unlocked">
   {{#anyBadges}}
      <h2>Unlocked!</h2>
   {{/anyBadges}}
   {{#badges_unlocked}}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
   {{/badges_unlocked}}

ロジックのないテンプレートでロジックを実行しない

これが私がすることです。Mustache テンプレートに条件付きロジックがある場合は、間違っていると思います。代わりに、この点ではるかに高度なハンドルバーを使用するか、ロジックを別の場所 (JavaScript) に移動することができます。

Mustache の readmeを参照してください

于 2013-02-23T15:08:10.790 に答える
5

最善の答え (Ruby と JavaScript の両方) は、ロジック (if_has_badges型の質問) を View クラスにカプセル化することです。

length配列プロパティを使用して、Ruby と JavaScript の両方で必要な少しのロジックを実際に偽造することができます。

{{# badges.length }}
<div class="badges">
  <h1>Badges</h1>

  {{# badges.unlocked.length }}
    <div class="badges-unlocked">
      <h2>Unlocked!</h2>
      {{# badges.unlocked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{/ badges.unlocked }}
    </div>
  {{/ badges.unlocked.length }}

  {{# badges.locked.length }}
    <div class="badges-locked">
      <h2>Locked!</h2>
      {{# badges.locked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{/ badges.locked }}
    </div>
  {{# badges.locked.length }}

</div>
{{/ badges.length }}

しかし、それは少し汚い方法です...

于 2013-02-24T10:43:33.727 に答える