9

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>

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}}

しかし、明らかにこれは機能しません。この関数は正しいアプローチのように感じますが、ページ上のテキストを正しくフォーマットするためにどこで使用できますか?

4

1 に答える 1

17

{{> 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>
于 2012-08-26T02:59:21.500 に答える