Search code examples
meteorspacebarsmeteor-helper

How do I indicate 'checked' or 'selected' state for input controls in Meteor (with spacebars templates)?


So I'm trying to be efficient and clean in my Spacebars templates as I work with Meteor. But I'm stumped by the way in which checkboxes and select options are to be dealt with. Suppose I want to have a checkbox set as checked or not depending on a flag that is in a document in one of my collections. I don't appear to be able to do the following:

<input type='checkbox' id='item-{{this.item_id}}' {{#if checked}}checked{{/if}} />

When I try this, I get the following error:

A template tag of type BLOCKOPEN is not allowed here.

If I try the following options, though, they all result in the checkbox being checked even when the flag is false:

<input type='checkbox' id='item-{{this.item_id}}' checked='{{#if checked}}true{{/if}}' />
<input type='checkbox' id='item-{{this.item_id}}' checked='{{#if checked}}true{{else}}false{{/if}}' />

I have the same trouble with selected in my select options, so I end up doing something like the following to get around it, which seems verbose and error-prone:

<select id='option-{{this.item_id}}'>
    {{#if option_60}}
        <option value='60' selected>1 hour</option>
    {{else}}
         <option value='60'>1 hour</option>
    {{/if}}

    {{#if option_90}}
         <option value='90' selected>90 mins</option>
    {{else}}
        <option value='90'>90 mins</option>
    {{/if}}

    {{#if option_120}}
         <option value='120' selected>2 hours</option>
    {{else}}
         <option value='120'>2 hours</option>
    {{/if}}
</select>

Solution

  • You can use non-block helpers for placing such arguments:

    UI.registerHelper('checkedIf', function(val) {
      return val ? 'checked' : '';
    });
    
    <input type="checkbox" {{checkedIf checked}}>