0

データセット（JSON）の一部に基づいてdivにクラスを追加したいと思います。これは私がデータを持っているものです：

{
    "title":"energy star",

    "cat":"power",

    "diff":"Investment",
    "description":"When purchasing appliances, consider buying 'energystar' certified appliances to radically reduce the amount of electricity used by older appliances.",
    "links":[
        {
            "title":"The Official Website of Energystar",
            "url":"http://www.energystar.gov"
        }
    ],
    "cost":"$60+"
},
{
    "title":"shut the faucet",
    "cat":"water",
    "diff":"No-Cost",
    "description":"Turn off the water while you brush your teeth. There is never a good reason for waste.",
    "cost":"$0"
},`

これが私のテンプレートです

        {{#each this}}
        {{#addClasses}}
        {{/addClasses}}

        <div class="tip_whole">
            <div class="tip_header">
                <h5 class="tip_title">
                    <b>{{title}}</b> - {{diff}}
                </h5>
                <div class="tip_social">
                    <a href=""><img src="IMG/media/twitter_16.png" alt="twiter link"/></a>
                    <a href=""><img src="IMG/media/facebook_16.png" alt="facebook link"/></a>
                    <a href=""><img src="IMG/media/email_16.png" alt="email link"/></a>
                </div>
            </div>{{!end .tip_title}}
            <div class="tip_body">
                <div class="grid_20 alpha">
                    <p class="tip_desc">{{description}}</p>
                    {{#if links}}
                        <div class="tip_links">
                        <h5>More information</h5>
                        {{#each links}}
                                <a href="{{url}}" class="tip_link" target="_blank">{{title}}</a>
                        {{/each}}
                        </div>{{!end .tip_links}}
                    {{/if}}
                </div>{{!end .grid_20 alpha}}
                <div class="grid_19 push_2">
                    <h2 class="tip_cost_title">Avg. Cost to Implement</h2>
                    <h1 class="tip_cost_title">{{cost}}</h1>
                </div>
            </div>{{!end .tip_body}}
        </div>{{!end .tip_whole}}
    {{/each}}

これが私のヘルパー機能です

Handlebars.registerHelper("addClasses",function(){
    if(this.cat=="water"){
            console.log('water');
            $(".tip_whole").addClass("water");
        } else {
            console.log('no water here');
        }
});//end of helper function

水があることを適切に記録しますが、クラスを追加することはありません。ハードコーディングされた「.tip_whole」にのみ影響しますが、ハンドルバーによって作成されたものには影響しません。

4

1 に答える 1

3

.tip_wholeあなたが言うときにDOMにないので、そのヘルパーは機能しません。そのため、クラスを何も$(".tip_whole")追加しないことになります。waterクラス（または何も）を文字列として返すには、ヘルパーを変更する必要があります。

Handlebars.registerHelper("addClasses", function() {
    return this.cat == 'water' ? 'water' : '';
});

次に、クラスが必要な場所でそのヘルパーを使用します。

<div class="tip_whole {{addClasses}}">

デモ： http： //jsfiddle.net/ambiguous/SSPSY/

于 2012-08-06T07:23:35.090 に答える