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つの画像のうちの1つを実装する方法です.
{{#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
しかし、もっとエレガントな解決策があるかどうか疑問に思っています。