Javascript 在mustache.js中使用逻辑

我刚开始使用mustache.js，遇到了一个问题。我知道mustache.js和handlebars.js一样逻辑性较差，但是可以使用一些真/假逻辑，所以我想知道是否可以实现以下目标。我的情况如下：

6个HTML模板，除以下内容外，所有模板均完全相同：

艺术家 日期 地点 网址 销售类型：预售|周五打折|周六打折|周日打折|现在打折|特价 我可以很容易地使用胡须来处理这些内容，因为销售是预售还是在售。但是，我有一张图片，我想根据销售类型进行旋转。例如：

json:

模板：

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

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

---

但我想知道是否有更优雅的解决方案。

这是我最终决定的解决方案：

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

模板：

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

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

---

请记住，还可以使用函数作为传递到模板的数据，例如：

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

{{#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" };
    }
  }
});