我想基于我的部分数据集(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',但不会影响由把手创建的那些
答案 0 :(得分:3)
当你说.tip_whole
时,你的$(".tip_whole")
课程根本不在你的water
课程中,所以帮助者无法工作。您将不得不更改您的帮助程序以将字符串(或任何内容)作为字符串返回:
Handlebars.registerHelper("addClasses", function() {
return this.cat == 'water' ? 'water' : '';
});
然后在你想要这个类的地方使用那个帮助器:
<div class="tip_whole {{addClasses}}">