Knockout: If binding callback not working

Question

I have a simple knockout component but my if binding is not working and I dont know why.

My template is the following:

<!-- ko if (getAlcContent($parent) > 0) -->
<div class="detail details-alc-content">
    <span class="value">
        <span data-bind="text: getAlcContent($parent)"></span>% Vol. Alc.
    </span>
</div>
<!-- /ko -->

And my Component:

/* ... */

getAlcContent: function(quoteItem) {
    var item = this.getItem(quoteItem.item_id);
    return item && parseFloat(item.alc_content) ? item.alc_content : undefined;
},

/* ... */

But the div.detail is always rendered even if I returned undefined. I have also tried false, 0 and getAlcContent($parent) > 0.

Why is it like this? On the knockout page it says any expression that evaluates to true or truish which is the case here.

Answer 1

There is a typo there, try

<!-- ko if: getAlcContent($parent) > 0 -->