在splash.js中使用逻辑
using logic in mustache.js
我刚开始使用splash.js,就遇到了一个问题。我知道splash.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
但我想知道是否有更优雅的解决方案。
这是我最终决定的解决方案:
{
"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}}
请记住,您也可以使用函数作为传递到模板的数据,例如:
{{#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" };
}
}
});
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- jQuery.click()赢得't从<a>在splash.js模板中
- 或使用splash.js的等效运算符
- splash.js中compile()、parse()和render()之间的差异
- 如何使用splash-js模板引擎访问嵌套对象
- 在splash.js中使用逻辑
- 使用splash通过php渲染js模板
- 可以缓存splash.js模板函数
- 用splash-js语法调用带有参数的函数
- Mustache js输出splash js代码
- 使用splash.js制作表格