Question

193

Mustache Conditions and Loops

rated 0 times [ 196] [ 3] / answers: 1 / hits: 35520 / 12 Years ago, sat, february 23, 2013, 12:00:00

Here are the resources:

JSON

{

  badges:{

    unlocked: [

      {name: Win 1},

      {name: Win 2},

      {name: Win 3}

    ],

    locked:[

      {name: Lose 1},

      {name: Lose 2},

      {name: Lose 3}

    ]

  }

}

Algorithm

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

How I can write this algorithm to work with Mustache compiler?

I need to do this to work with two sides, first is the RubyOnRails application and the second is the client-side (JavaScript).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lindsay

Add To Favorites

Follow

Total Points: 402

Total Questions: 109

Total Answers: 109

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

answered 12 Years ago irvingcarloe · Accepted Answer

There are two solutions to your problem.

Using selections and inverted selections

Here is an example from the mustache documentation:

{

  repos: []

}

Template:

{{#repos}}<b>{{name}}</b>{{/repos}}

{{^repos}}No repos :({{/repos}}

Output:

No repos :(

As you see the inverted selections let me do conditional logic. In your case it would look something like:

Json:

var viewModel = {

    badges:[]//badges here

}

viewModel.anyBadges = badges.length >0;

Mustache:

    <div class=badges-unlocked>

   {{#anyBadges}}

      <h2>Unlocked!</h2>

   {{/anyBadges}}

   {{#badges_unlocked}}

      <a href=# class=badge>

        <strong>{{ name }}</strong>

      </a>

   {{/badges_unlocked}}

Don't do logic in logic-less templating

This is what I would do. If you have conditional logic in your Mustache templates I think you're doing it wrong. You can either use Handlebars instead which is much more advanced in this regard or move your logic someplace else (to your javascript).

Please see the Mustache readme