Checkbox Component

1

I’m trying to create a component that has a checkbox in it’s layout using Ember 2.2. I’ve followed this thread on github and come up with the following solution:

export default Ember.Component.extend({
  layout: hbs(`
    {{#if checked}}
      <input type="checkbox" checked {{action "selectAll" on="change"}}>
    {{else}}
      <input type="checkbox" {{action "selectAll" on="change"}}>
    {{/if}}
  `),

  checked: false,

  actions: {
    selectAll(){
       ...
    }
  }

I’m OK with this solution but the layout is not DRY(btw: I’m used to views where you could inline the template. Any links explaining why/how this has changed to only having a layout would be really helpful.). I’d prefer something like this:

<input type="checkbox" {{if checked "checked"}} {{action "selectAll" on="change"}}>

but that throws the error:

Uncaught TypeError: Cannot read property 'yield' of undefined

Which I’ve tracked down to:

  function ifUnless(params, hash, options, truthy) {
    _emberMetalDebug.assert('The block form of the `if` and `unless` helpers expect exactly one ' + 'argument, e.g. `{{#if newMessages}} You have new messages. {{/if}}.`', !options.template.yield || params.length === 1);

    _emberMetalDebug.assert('The inline form of the `if` and `unless` helpers expect two or ' + 'three arguments, e.g. `{{if trialExpired \'Expired\' expiryDate}}` ' + 'or `{{unless isFirstLogin \'Welcome back!\'}}`.', !!options.template.yield || params.length === 2 || params.length === 3);

    if (truthy) {
      if (options.template.yield) {
        options.template.yield();
      } else {
        return params[1];
      }
    } else {
      if (options.inverse.yield) {
        options.inverse.yield();
      } else {
        return params[2];
      }
    }
  }

It’s failing at the first assert. I assume this is because options.template is undefined.

Any help would be greatly appreciated.

Thanks!

2 
<input
  type="checkbox"
  checked={{checked}}
  {{action "check" on="change"}}
/>
1 Like
3

nice. works like a charm.

Thanks!