Flipping Checkbox

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  valueUndefined: undefined,
  valueNull: null,
  valueFalse: false,
  
  value1: Ember.computed('valueUndefined', {
    get: function() {
      return !this.get('valueUndefined');
		},
    set: function(key, value) {
  		this.set('valueUndefined', !value);
      return value;
    }
	}),
  
  value2: Ember.computed('valueNull', {
    get: function() {
      return !this.get('valueNull');
		},
    set: function(key, value) {
  		this.set('valueNull', !value);
      return value;
    }
	}),
  
  value3: Ember.computed('valueFalse', {
    get: function() {
      console.log('getting', this.get('valueFalse'), !this.get('valueFalse'));
      return !this.get('valueFalse');
		},
    set: function(key, value) {
      console.log('setting', value, !value);
  		this.set('valueFalse', !value);
      return value;
    }
	}),
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>

<p>
Initial is undefined<br />
{{input type='checkbox' checked=value1}} {{value1}} {{valueUndefined}}
</p>

<p>
Initial is null<br />
{{input type='checkbox' checked=value2}} {{value2}} {{valueNull}}
</p>

<p>
Initial is false<br />
{{input type='checkbox' checked=value3}} {{value3}} {{valueFalse}}
</p>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "canary",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "canary"
  }
}