I want Handlebar {{#if}} logic inside of a Ember.Handlebars.helper

Question

I am converting someone else's code to Handlebars.js and I'm stuck on converting this tag to its {{#handle-bar}}{{/handle-bar}} counterpart.

The previous coder used an {{#ifCond}} to toggle what 'selected'. This is my component.

{{#dropdown-item }}
    {{unbound this.itemName}}
{{/dropdown-item}}

Here is the div i want converted to my component

<div class="dropdownItem" {{bind-attr value=formField_DropdownItemID}}{{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} >
    {{unbound this.itemName}}
</div>

My first thought was to just pop the div's logic into the the component, like the next example, but this gave me an error.

{{#dropdown-item bind-attr value=formField_DropdownItemID {{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} }}
    {{unbound this.itemName}}
{{/dropdown-item}}

Any suggestions?

Answer 1

You can set those properties to compute. The syntax would be:

{{#dropdown-item selected=computedProperty value=formField_DropdownItemID}}

computedProperty can deal with your conditional logic. The whole idea is to pull that out of handlebars anyways. :)