Question

mustache.js whether to support such an expression? -> {{type == “a”}}

How do I do?

Mustache：

{{#items}}
  {{type == "a"}} 
    <li>{{name}} {{type}}</li>
  {{/link}}
  {{type == "b"}} 
    <strong>{{name}} {{type}}</strong>
  {{type == "c"}} 
    <span>{{name}} {{type}}</span>
  {{/link}}
{{/items}}

JSON：

{
  "header": "Colors",
  "items": [
      {"name": "red", "type": "a", "url": "#Red"},
      {"name": "green", "type": "b", "url": "#Green"},
      {"name": "blue", "type": "c", "url": "#Blue"}
  ],
  "empty": false
}

want Output:

<li>red a</li>
<strong>green b</strong>
<span>blue c</span>

Answer 1

You can’t because Mustache is logic-less.

Best practice is to change your input JSON in such a way that the ‘logic’ is already included in the input. Something like:

{
  "header": "Colors",
  "items": [
      {"a": {"name": "red", "url": "#Red"}},
      {"b": {"name": "green", "url": "#Green"}},
      {"c": {"name": "blue", "url": "#Blue"}}
  ],
  "empty": false
}

Then:

{{#items}}
  {{#a}}
    <li>{{name}} {{type}}</li>
  {{/a}}
  {{#b}}
    <strong>{{name}} {{type}}</strong>
  {{/b}}
  {{#c}}
    <span>{{name}} {{type}}</span>
  {{/c}}
{{/items}}

Would produce what you wanted.

EDIT
Somehow I couldn’t get the above example to work. I’m using Hogan (a version of mustache maintained by Twitter which is faster as well as having a couple of extra things you can do with it, be sure to check it out) but I’m pretty sure that hasn’t got anything to do with the fact that the above stuff should just work.

Anyway, I could get the following to work on the supplied demo page, which stays closer with the original example, and accomplishes the output you wanted. General note: You can check for existence of a field (e.g using {{#isa}}) but you can’t have any other logic in the tags.

{{#items}}
  {{#isa}}
   <li><strong>{{name}}</strong></li>
  {{/isa}}
  {{#isb}}
   <li><a href="{{url}}">{{name}}</a></li>
  {{/isb}}
  {{#isc}}
    <li><span href="{{url}}">{{name}}</span ></li>
  {{/isc}}
{{/items}}

JSON

{
  "header": "Colors",
  "items": [
      {"name": "red", "isa": true, "url": "#Red"},
      {"name": "green", "isb": true, "url": "#Green"},
      {"name": "blue", "isc": true, "url": "#Blue"}
  ],
  "empty": false
}

hth