[英]Meteor: How can I use Spacebars to apply different CSS elements?
I'd like to use a different color for the header of my card. 我想用不同的颜色作为我卡片的标题。 I thought that I could use
Spacebars
unique {{if
condition for it but it seems it only works with boolean variables and not with a condition that is checking for a string: 我以为我可以使用
Spacebars
unique {{if
for it但它似乎只适用于布尔变量,而不是检查字符串的条件:
Here's my code: 这是我的代码:
{{#if type='ToDo'}}
<div class="paper-card-header teal-header">
{{else}}
{{#if type='Info'}}
<div class="paper-card-header orange-header">
{{else}}
<div class="paper-card-header pink-header">
{{/if}}
{{/if}}
I'd like to use the CSS element of teal-header
for the condition that type==='ToDo'
, orange-header
for the condition that type==='Info' and
pink-header for every other value of
type`. 我想使用
teal-header
的CSS元素作为type==='ToDo'
的条件, orange-header
用于type==='Info' and
的条件,粉色标题for every other value of
。
How can I achieve this or is it not possible to do within Meteor? 我怎样才能实现这个目标,或者在Meteor中不可能做到这一点?
You just need a helper to return the appropriate class: 你只需要一个帮助器来返回适当的类:
Template.YOURTEMPLATE.helpers({
headerClass: function () {
var class = {
'ToDo': 'teal-header',
'Info': 'orange-header'
}[this.type]
return class || 'pink-header'
}
})
Then in your template: 然后在你的模板中:
<div class="paper-card-header {{headerClass}}"></div>
Note that you can also use Spacebars subexpressions with an equals helper like below, but I don't think that's the right option for this situation where there are multiple possibilities: 请注意,您也可以使用带有等号帮助器的Spacebars子表达式 ,如下所示,但我不认为这种情况有多种可能性:
Template.registerHelper('equal', (x, y) => x === y)
<div class="paper-card-header {{#if (equal type "Info")}}orange-header{{/if}}"></div>
Having a general equal helpers is often very useful anyway though. 尽管如此,拥有一般的平等帮助者通常非常有用。
You can implement a helper and put it inside the 'class' attribute 您可以实现一个帮助程序并将其放在“class”属性中
<div class="paper-card-header {{getColorByType}}-header">
And in your template's javascript, something like 在您的模板的JavaScript中,类似于
Template.myTemplate.helpers({
getColorByType(){
var type = ... // get your type from the template instance
if (type === 'ToDo'){
return 'teal';
} else if (type === 'Info'){
return 'orange';
}
return 'teal';
}
}
Based on the answers by @richsilv and @mati-o I've used template helpers as suggested by both of them. 根据@richsilv和@ mati-o的答案,我使用了两个人建议的模板助手。 But I selected for what I personally think is an easier to read code (which gives me also the option to get even more different colors in):
但我选择了我个人认为更容易阅读的代码(这也让我可以选择获得更多不同的颜色):
Template.puzzle.helpers({
headerColor: function () {
switch (this.type) {
case "ToDo":
return 'md-orange-header';
break;
case "Info":
return 'md-green-header';
break;
case "NewTG":
return 'md-teal-header';
break;
default:
return 'md-green-footer';
}
}
});
The use of this helper in the html code is the same but for completeness here's also that piece of code: 在html代码中使用这个帮助器是相同的,但为了完整性,这里也是那段代码:
<div class="paper-card-header {{headerColor}}">
Thanks again to both for helping me out! 再次感谢两位帮助我!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.