Checkbox Component


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"}}>
      <input type="checkbox" {{action "selectAll" on="change"}}>

  checked: false,

  actions: {

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) {
      } else {
        return params[1];
    } else {
      if (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.


  {{action "check" on="change"}}


nice. works like a charm.