[英]Handlebars, if else if custom helper
我在弄清楚如何构造车把帮手时遇到问题。 我有一个特殊的情况,我得到了5个不同符号的列表,需要将它们应用于元素。
列表如下:
我已经用此代码块解决了这个问题,但是每次我看到它并想将其移到一个帮助程序中以清理标记时,我几乎都会感到畏缩。
<div class="case-image" data-img-src="{{image_url}}">
{{#if sign_url }}
<div class="case-sign">{{sign_url}}</div>
{{else}}
{{#if solgt}}
<div class="case-sign">Solgt</div>
{{else}}
{{#if aabenthus}}
<div class="case-sign">Åbent hus</div>
{{else}}
{{#if nyhed}}
<div class="case-sign">Nyhed</div>
{{else}}
{{#if ny_pris}}
<div class="case-sign">Ny pris</div>
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
<a href="{{page_url}}"></a>
</div>
我猜想您要使用“枚举”类型,而不是为每种类型使用5个单独的标志。 如果类型为Custom Sign
,则使用customValue
。 否则,返回该类型的预定字符串。
把手文件
<div class="case-image" data-img-src="{{image_url}}">
<div class="case-sign">{{sign type customValue}}</div>
<a href="{{page_url}}"></a>
</div>
</div>
在浏览器JS中:
// Enumeration for type of house
var Types = {
'Custom Sign': 1,
'Sold': 2,
'Open house': 3,
'New': 4,
'New price': 5
};
Handlebars.registerHelper('sign', function(type, customValue) {
var ret = '';
if (type === Types['Custom Sign']) {
ret = customValue || '';
} else if (type === Types['Sold']) {
ret = 'Solgt';
} else if (type === Types['Open house']) {
ret = 'Åbent hus'
} else if (type === Types['New']) {
ret = 'Nyhed';
} else if (type === Types['New house']) {
ret = 'Ny pris';
}
return ret;
});
如果您使用的是Express,请通过这种方式与助手一起设置视图引擎
var exphbs = require('express-handlebars');
var hbs = exphbs.create({
helpers: {
sign: function(type, customValue) {
// same implementation as above
}
},
extname: '.hbs', // optional - edit as desired
layoutsDir: './views/', // optional - edit as desired
defaultLayout: 'layout' // optional - edit as desired
});
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.