是否可以根据 handlebars.js 模板值动态设置输入字段的文本颜色?
我最初使用这个模板创建我的 html:
<div class="header"><span class="name">项目</span><span class="status">Status</span>{{#每个项目}}{{>项目}}{{/每个}}
其中 projects 是从数据库读取的对象.每个 project 的结果 html(在页面上呈现的内容而不是我的 html 中的内容)看起来像这样:
<span class="name">FOO</span><span class="status">OK</span><div class="项目"><span class="name">BAR</span><span class="status">NOTOK</span>
我想用 OK & 的颜色渲染这个 html动态设置 NOTOK 文本.
我已经有一个车把辅助函数，它可以根据每个选项成功返回正确的颜色代码，我可以使用以下方法调用它:
{{getStatusColor currentStatus}}我想做的是把这个函数调用直接放到css里面，有点像:
字体颜色:{{getStatusColor currentStatus}}但显然这行不通.虽然这个功能确实是正确的方法，但我在哪里可以使用它来正确设置页面上的文本格式?
回答我自己的问题:需要扩展模板(来自 {{>projects}})以允许条件渲染.
<div class="header"><span class="name">项目</span><span class="status">Status</span>{{#每个项目}}<div class="项目"><span class="name">{{name}}</span><span class="status" style="color:{{getStatusColor status}}">{{status}}</span>
{{/每个}}
为了完整起见，辅助函数 getStatusColor 如下所示:
Handlebars.registerHelper('getStatusColor', function(status) {开关(状态){案例好":{返回绿色"；}休息;案例坏":{返回红色"；}休息;默认 : {...等等.;}});更新:老实说，我应该承认我完全错过了我的代码中已经有这个扩展模板和 {{>项目}} 指向了这一点.我应该将 style="color:{{getStatusColor status}}" 属性直接添加到引用的 project 模板中.所以，为了我和其他人的利益一样，最终的、有效的 HTML:
<div class="board"><div class="header"><span class="name">项目</span><span class="status">Status</span>{{#每个项目}}{{>项目}}{{/每个}}
<模板名称=项目"><div class="project {{selected}}"><span class="name">{{name}}</span><span class="status"style="color:{{getStatusColor status}}">{{status}}</span>
Is it possible to dynamically set the text color of a input field based on a handlebars.js template value?
I am initially creating my html using this template:
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
Where projects is an object read from a db. The resulting html (what gets rendered on the page not what is in my html) for each project looks something like this:
<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>
I would like to render this html with the colour of the OK & NOTOK text set dynamically.
I already have a handlebars helper function that will successfully return the correct colour code based on each option and I can call this using:
{{getStatusColor currentStatus}}
What I would like to do is put this function call directly into the css itself, a bit like:
font-color: {{getStatusColor currentStatus}}
But obviously this doesn't work. This function does feel like the right approach though but where can I use it to format the text correctly on the page?
Answering my own question: The template needed to be expanded (from {{> projects}}) to allow for conditional rendering.
<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>
For completeness, the helper function getStatusColor looks like this:
Handlebars.registerHelper('getStatusColor', function(status) {
switch (status) {
case "GOOD" : {
return 'green';
}
break;
case "BAD" : {
return 'red';
}
break;
default : {
...etc.;
}
});
UPDATE:In the interests of honesty, I should confess I totally missed that I already had this expanded template in my code and that {{> projects}} was pointing to this. I should have just added the style="color:{{getStatusColor status}}" attribute directly into the referenced project template. So, as much for my benefit as others, the final, working, 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>
这篇关于根据模板值动态设置 CSS 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！