CODEWITHSUNDEEP
meteorreturnhandlebars.js
zakir2k
zakir2k

Reputation: 57

Handlebars Helper Function not returning multiple classes correctly

I have a handlebars helper function that takes in a numeric value and needs to return a set of classes associated with that value back to either the div block or the full statement in my html:

e.g. snippet below:

Handlebars.registerHelper('text', function(num) {

    switch(num.toString()){
        case "3": 
            return "three double dice";
            break;

The helper function works. Slight problem. When it attaches it to my div in my DOM, for some reason only the first word appears as my class attribute. i.e.

HTML(DOM): <div class="two" double dice>

or if i rearrange my return statement:

HTML(DOM): <div class="double" two dice>

I have tried to return the entire div line. i.e.

return '<div class="two double dice">'

as well as declaring variables in my helper function:

return "<div class="+ numClass + doubleClass + diceClass + ">"

and even as a handlebars safeString:

return new Handlebars.SafeString("<div class="+ numClass + doubleClass + diceClass + ">");

Please can somebody tell me what the correct way to return multiple classes using the handlebars helper function is? Appreciated.

Updated(18/03/14):

To include the template. So depending on which version of the helper function above you use it is either.

<template name="threeDice">
    <div class={{text Roll.dice1}}>
        *Content*
    </div>
</template>

or

<template name="threeDice">
    {{text Roll.dice1}}
        *Content*
    </div>
</template>

or even:

<template name="threeDice">
    <div class= {{text Roll.dice1}} "double dice">
        *Content*
    </div>
</template>

if i change the helper function to only return the "number" string.

Upvotes: 0

Views: 677

Answers (1)

Hubert OG
Hubert OG

Reputation: 19544

Your helper code seems to be correct, so most probably the error is in how you call it. For the helper

Handlebars.registerHelper('classes', function(num) {
  if(num.toString() === '3') return 'three double dice';
});

The correct call should be

<div class="{{classes 3}}">

Upvotes: 1

Related Questions