是否可以根据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>
Where projects
是从数据库读取的对象。每个结果的 html(页面上呈现的内容而不是我的 html 中的内容)project
看起来像这样:
<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 和 NOTOK 文本的颜色来渲染这个 html。
我已经有一个车把辅助函数,它将根据每个选项成功返回正确的颜色代码,我可以使用以下方式调用它:
{{getStatusColor currentStatus}}
我想做的就是将此函数调用直接放入 css 本身中,有点像:
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}}"
属性直接进入引用project
模板。因此,为了我和其他人的利益,最终的、有效的 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)