mustache.js whether to support such an expression judgment ？

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>

Geert-Jan · Accepted Answer · 2012-06-13T11:09:41.570

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

thanks,do you know what template engine support the expression judgment ？And I do not understand why "Mustache" made of the logic-less, inconvenient to use, what good is it? — Justin wong, Jun 12 '12 at 17:01
As to the why: http://stackoverflow.com/questions/3896730/whats-the-advantage-of-logic-less-template-such-as-mustache .. Having said that, even without logic Mustache is really powerful, when you come to use it. For example it's perfectly legal to have a function in your json to be called by reference in Mustache. Now if that function was to do something with the other data in the json, you quickly realize it works great. — Geert-Jan, Jun 12 '12 at 17:17
thanks,according to your statement,I try it here:http://mustache.github.com/#demo why **{{name}} {{type}}** output nothing? — Justin wong, Jun 13 '12 at 00:48
Some funny stuff going on with that demo.. I can't get copy-pasted code to work. see my updated answer. — Geert-Jan, Jun 13 '12 at 11:03
thanks! Please help to look at this issue http://stackoverflow.com/questions/11010958/what-is-the-difference-between-javascript-micro-templating-and-mustache-js-han — Justin wong, Jun 13 '12 at 11:14

mustache.js whether to support such an expression judgment ？

1 Answers1