Siyah Siyah - 6 months ago 96
Javascript Question

Handlebar custom helper stuck on "doesn't match each"

I want to make certain elements lowercase by using handlebars (I know it's possible with CSS, but you can't do that for classnames for example). Anyhow, I am getting this error:

Uncaught Error: toLowerCase doesn't match each


My code:

<script id="icon-template" type="text/x-handlebars-template">
{{#each results}}
<li>
<div class="content">
<i class="Icon icon-{{#toLowerCase contentType}}"></i>
</div>
</li>
{{/each}}
</script>


Custom helper:

<script type="text/javascript">
Handlebars.registerHelper("toLowerCase", function(input) {
var output = input.toLowerCase();
return output.replace(" ", "");
});
</script>


What am I doing wrong?

Answer

I figured it out. For anyone having the same problems:

<script type="text/javascript">
handlebars.registerHelper("toLowerCase", function(input) {
    var output = input.toLowerCase();
    return output.replace(" ", "");
});
</script>

Handlebars must have a lowercase letter (like this: handlebars) at first & no hashtag is needed when you are using a custom helper. So the custom helper is now toLowerCase instead of #toLowerCase

<script id="icon-template" type="text/x-handlebars-template">
    {{#each results}}
    <li>
        <div class="content">
                <i class="Icon icon-{{toLowerCase contentType}}"></i>
        </div>
   </li>
   {{/each}}
</script>