Bind an Ember checkbox to the opposite value of a property

Question

I have a model foo with the property bar . When I render an ember checkbox, I want to bind the checked property to foo.bar such that when the box is checked foo.bar is false and when unchecked, foo.bar is true

Doing:

{{input
  type='checkbox'
  checked=foo.bar}}

gets me the opposite of what I want, while

{{input
  type='checkbox'
  checked=(not foo.bar)}}

does not bind the value of foo.bar to the checked property. How can I solve this without adding a new notBar property to foo ?

Answer 1

You can do this:

<input
 type='checkbox'
 onchange={{action (mut foo.bar) (not foo.bar)}}
 checked={{not foo.bar}}>

You dont need an external toggle helper for this.

Answer 2

This does the trick:

<input
 type='checkbox'
 onchange={{action (toggle 'bar' foo)}}
 checked={{not foo.bar}}>

Using https://github.com/DockYard/ember-composable-helpers#toggle