在mustache.js中使用邏輯

我剛開始使用mustache.js，遇到了一個問題。我明白，mustache.js是邏輯較少（如handlebars.js），但有一些邏輯（真/假），可以使用，所以我想知道是否可以實現以下內容。這裏是我的情況：在mustache.js中使用邏輯

6 HTML模板，所有的一致，除了以下相同：

藝術家
日期
場地
網址
銷售類型：（預售|星期五|特價出售|特價）

我可以使用小鬍子輕鬆處理此內容，因爲此銷售是預售或出售。但是，我有一張我想根據銷售類型輪換的圖像。例如：

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

但我想知道是否有更優雅的解決方案。

來源

2013-06-29 alyda

這裏的解決方案，我終於決定：

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

來源

2013-06-30 03:42:56 alyda

記住，你也可以使用函數作爲傳遞給你的模板中的數據，例如：

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

來源

2015-01-06 13:27:41 JVitela

在mustache.js中使用邏輯

回答

相關問題