是否可以根据handlebars.js模板值动态设置输入字段的文本颜色？
我最初使用这个模板创建我的html：
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
项目是从数据库读取的对象.每个项目生成的html(在页面上呈现的内容而不是我的html中的内容)看起来像这样：
<div class="project">
<span class="name">FOO</span>
<span class="status">OK</span>
</div>
<div class="project">
<span class="name">BAR</span>
<span class="status">NOTOK</span>
</div>
我想用OK&的颜色渲染这个HTML. NOTOK动态设置文本.
我已经有一个把手辅助函数,可以根据每个选项成功返回正确的颜色代码,我可以使用以下方法调用它：
{{getStatusColor currentStatus}}
font-color: {{getStatusColor currentStatus}}
解决方法
回答我自己的问题：需要扩展模板(从{{> projects}})以允许条件渲染.
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
<div class="project">
<span class="name">{{name}}</span>
<span class="status" style="color:{{getStatusColor status}}">{{status}}</span>
</div>
{{/each}}
</div>
为完整起见,辅助函数getStatusColor如下所示：
Handlebars.registerHelper('getStatusColor',function(status) {
switch (status) {
case "GOOD" : {
return 'green';
}
break;
case "BAD" : {
return 'red';
}
break;
default : {
...etc.;
}
});
更新：
为了诚实,我应该承认我完全错过了我已经在我的代码中使用了这个扩展模板{{> projects}}指向这个.我应该直接将style =“color：{{getStatusColor status}}”属性添加到引用的项目模板中.因此,尽管我和其他人一样受益,最终的,有效的,HTML：
<template name="foo">
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
</template>
<template name="project">
<div class="project {{selected}}">
<span class="name">{{name}}</span>
<span class="status"style="color:{{getStatusColor status}}">{{status}}</span>
</div>
</template>