с использованием логики в mustache.js

Question

Я только начал работать с mustache.js, и у меня возникла проблема. Я понимаю, что mustache.js не имеет логики (как и handlebars.js), но есть некоторая логика (true/false), которую можно использовать, поэтому мне интересно, можно ли достичь следующего. Вот моя ситуация:

6 HTML шаблоны, все точно так же, за исключением следующих:

• художника
• Дата
• место
• URL
• Тип продажи: (предпродажной | в продаже пятница | в продаже суббота | в продаже воскресенье | в продаже сейчас | специальное предложение)

Я могу легко работать с этим контентом с помощью усов, так как продажа - это ПРЕДВАРИТЕЛЬНОЕ ПРЕДЛОЖЕНИЕ ИЛИ в продаже. Однако у меня есть образ, который я хочу повернуть в зависимости от типа продажи. Пример:

JSON:

{ 
    "artist": "John Doe", 
    "date": 1026, 
    "venue": "Civic Center", 
    "offer": { 
    "text": "Exclusive Presale offer", 
    "presale": "Thursday 10AM-10PM", 
    "password": "PRESALE", 
    "public": "Friday 10AM" 
    }, 
    "url": "http://www.buy.com", 
    "presale": true, 
    "onSale": false 
} 

шаблона:

<font face="Verdana, Arial, Helvetica, sans-serif" size="-2" color="#b7b7b7"> 
{{#presale}} 
Presale Offer for {{artist}}, {{offer.presale}}, use password {{offer.password}}. 
{{/presale}} 

{{#onSale}} 
{{artist}} at {{venue}} on {{date}}, tickets are on sale {{offer.public}}. 
{{/onSale}} 
View this message in a <a href="{{view_email_url}}" alias="chtv link"><font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color="#b7b7b7">browser</font></a>.</font> 

моя проблема заключается в том, как реализовать один из 6 изображений,

{{#imgPresale}} 
    <img src="presale.jpg" width="225" height="45" alt="Exclusive Presale Offer" style="display:block"> 
{{/imgPresale}} 
{{#imgOnSaleFriday}} 
    <img src="osFri.jpg" width="225" height="45" alt="On Sale Friday" style="display:block"> 
{{/imgOnSaleFriday}} 
{{#imgOnSaleSaturday}} 
    <img src="osSa.jpg" width="225" height="45" alt="On Sale Saturday" style="display:block"> 
{{/imgOnSaleSaturday}} 
{{#onSaleSunday}} 
    <img src="osSu.jpg" width="225" height="45" alt="On Sale Sunday" style="display:block"> 
{{/imgOnSaleSunday}} 
{{#imgOnSaleNow}} 
    <img src="osn.jpg" width="225" height="45" alt="On Sale Now" style="display:block"> 
{{/imgOnSaleNow}} 
{{#imgSpecialOffer}} 
    <img src="offer.jpg" width="225" height="45" alt="Special Offer" style="display:block"> 
{{/imgSpecialOffer}} 

простой способ сделать это было бы :

"imgPresale": true, 
"imgOnSaleNow": false, 
"imgOnSaleFriday": false, 
"imgOnSaleSaturday": false, 
"imgOnSaleSunday": false, 
"imgSpecialOffer": false 

, но мне интересно, есть ли более элегантное решение.

Answer 1

Вот решение, которое я, наконец, решил на:

{ 
    "artist": "John Doe", 
    "support": false, 
    "date": "1026", 
    "venue": "Civic Center", 
    "url": "http://buy.com", 
    "offer": { 
    "text": "Exclusive Presale offer", 
    "presale": "Thursday 10AM-10PM", 
    "password": "PRESALE", 
    "public": "Friday 10AM" 
    }, 
    "sale" : { 
    "presale" : true, 
    "specialOffer" : false, 
    "onSale": { 
    "Now": false, 
     "Friday": false, 
     "Saturday": false, 
     "Sunday": false 
} 
    } 
} 

шаблона:

{{#sale}} 
    {{#sale.presale}} 
    <img src="presale.jpg" width="225" height="45" alt="Exclusive Presale Offer" style="display:block"> 
    {{/sale.presale}} 
    {{#sale.specialOffer}} 
    <img src="offer.jpg" width="225" height="45" alt="Special Offer" style="display:block"> 
    {{/sale.specialOffer}} 
    <!-- - - - - - - - - - - - - - - - - --> 
    {{#sale.onSale.Now}} 
    <img src="osn.jpg" width="225" height="45" alt="On Sale Now" style="display:block"> 
    {{/sale.onSale.Now}} 
    {{#sale.onSale.Friday}} 
    <img src="osFri.jpg" width="225" height="45" alt="On Sale Friday" style="display:block"> 
    {{/sale.onSale.Friday}} 
    {{#sale.onSale.Saturday}} 
    <img src="osSa.jpg" width="225" height="45" alt="On Sale Saturday" style="display:block"> 
    {{/sale.onSale.Saturday}} 
    {{#sale.onSale.Sunday}} 
    <img src="osSu.jpg" width="225" height="45" alt="On Sale Sunday" style="display:block"> 
    {{/sale.onSale.Sunday}} 
{{/sale}} 
<!-- - - - - - - - - - - - - - - - - --> 
{{^sale}} 
    <img src="blank.jpg" width="225" height="45" style="display:block"> 
{{/sale}} 

Answer 2

Помните, что вы также можете использовать функции в качестве данных, которые вы передаете ваш шаблон, например:

{{#sale}} 
    {{#img}} 
    <img src="{{src}}" width="225" height="45" alt="{{desc}}"> 
    {{/img}} 
{{/sale}} 

И затем:

Mustache.render(template,{ 
    sale: { 
    img: function() { 
     // Put logic here and return what you want: 
     return { src:"presale.jpg", desc:"Exclusive Presale Offer" }; 
    } 
    } 
});