Dynamisch festlegen einer CSS-Eigenschaft auf einer Vorlage basiert, Wert
Ist es möglich, dynamisch legen Sie die Farbe für den text eines input-Feldes basierend auf einem handlebars.js Vorlage Wert?
Ich bin zunächst erstellen meiner html-verwenden Sie diese Vorlage:
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
Wo projects
ist ein Objekt Lesen aus einer db. Der resultierende html-Code (was gerendert wird auf der Seite nicht, was ist in meinem html) für jede project
sieht ungefähr so aus:
<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>
Ich würde gerne machen das mit html die Farbe des OK & NOTOK text dynamisch gesetzt.
Ich habe schon einen LENKER helper-Funktion, die erfolgreich Rendite die richtige Farb-code basiert, die auf jede option und ich anrufen kann dies mit:
{{getStatusColor currentStatus}}
Was ich tun möchte, ist setzen mit dieser Funktion rufen Sie direkt in der css selbst, ein bisschen wie:
font-color: {{getStatusColor currentStatus}}
Aber offensichtlich ist dies nicht funktioniert. Mit dieser Funktion fühlt sich wie die richtige Vorgehensweise ist, aber wo kann ich es verwenden, formatieren Sie den text richtig auf der Seite?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beantwortung meiner eigenen Frage: Das template benötigt, um erweitert werden (von
{{> projects}}
) für bedingtes rendering.Für die Vollständigkeit, die helper-Funktion getStatusColor sieht wie folgt aus:
UPDATE:
Im Interesse der Ehrlichkeit, ich sollte gestehen, ich völlig verpasst, dass ich schon hatte, diese erweiterte Vorlage in meinem code und das
{{> projects}}
war, deutete auf diese. Ich sollte nur Hinzugefügt diestyle="color:{{getStatusColor status}}"
- Attribut direkt in den referenziertenproject
Vorlage. So, so viel für meinen nutzen als andere, die Letzte, arbeiten, HTML: