Computed Properties Quirk Demo

components.broken-example.js

export default Ember.Component.extend({
  selection: 'Cat',

  isCatFavorite: Ember.computed.equal('selection', 'Cat'),
  isDogFavorite: Ember.computed.equal('selection', 'Dog'),
  isMonkeyFavorite: Ember.computed.equal('selection', 'Monkey'),
  isBearFavorite: Ember.computed.equal('selection', 'Bear'),
  
  catButtonClass: Ember.computed('isCatFavorite', {
    get() {
      return this._getSelectionClassFor('Cat');
    }
  }),
   
  dogButtonClass: Ember.computed('isDogFavorite', {
    get() {
      return this._getSelectionClassFor('Dog');
    }
  }),
  
  monkeyButtonClass: Ember.computed('isMonkeyFavorite', {
    get() {
      return this._getSelectionClassFor('Monkey');
    }
  }),
  
  bearButtonClass: Ember.computed('isBearFavorite', {
    get() {
      return this._getSelectionClassFor('Bear');
    }
  }),
  
  _getSelectionClassFor(type) {
    return this.get('selection') === type ? 'selected' : '';
  },
  
  actions: {
    selectFavorite(typeOfAnimal) {
      this.set('selection', typeOfAnimal);
    }
  }
});

components.finished-example.js

const SELECTION_CLASS = 'selected';

export default Ember.Component.extend({
  selection: 'Cat',

  isCatFavorite: Ember.computed.equal('selection', 'Cat'),
  isDogFavorite: Ember.computed.equal('selection', 'Dog'),
  isMonkeyFavorite: Ember.computed.equal('selection', 'Monkey'),
  isBearFavorite: Ember.computed.equal('selection', 'Bear'),
  
  catButtonClass: Ember.computed('isCatFavorite', {
    get() {
      return this.get('isCatFavorite') ? SELECTION_CLASS : '';
    }
  }),
   
  dogButtonClass: Ember.computed('isDogFavorite', {
    get() {
      return this.get('isDogFavorite') ? SELECTION_CLASS : '';
    }
  }),
  
  monkeyButtonClass: Ember.computed('isMonkeyFavorite', {
    get() {
    	return this.get('isMonkeyFavorite') ? SELECTION_CLASS : '';
    }
  }),
  
  bearButtonClass: Ember.computed('isBearFavorite', {
    get() {
      return this.get('isBearFavorite') ? SELECTION_CLASS : '';
    }
  }),
  
  actions: {
    selectFavorite(typeOfAnimal) {
      this.set('selection', typeOfAnimal);
    }
  }
});

components.working-example.js

export default Ember.Component.extend({
  selection: 'Cat',

  catButtonClass: Ember.computed('selection', {
    get() {
      return this._getSelectionClassFor('Cat');
    }
  }),
   
  dogButtonClass: Ember.computed('selection', {
    get() {
      return this._getSelectionClassFor('Dog');
    }
  }),
  
  monkeyButtonClass: Ember.computed('selection', {
    get() {
      return this._getSelectionClassFor('Monkey');
    }
  }),
  
  bearButtonClass: Ember.computed('selection', {
    get() {
      return this._getSelectionClassFor('Bear');
    }
  }),
  
  _getSelectionClassFor(type) {
    return this.get('selection') === type ? 'selected' : '';
  },
  
  actions: {
    selectFavorite(typeOfAnimal) {
      this.set('selection', typeOfAnimal);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

router.js

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
});

export default Router;

styles.app.css

* {
	font-family: Arial;
}

.selected {
	background-color: #3498db;
  }

templates.application.hbs

<h1>Computed Properties Quirks Demo</h1>

<h2>Working Example</h2>
{{working-example}}

<h2>Broken Example</h2>
{{broken-example}}

<h2>Finished Refactoring Example</h2>
{{finished-example}}

templates.components.broken-example.hbs

<div>
	Your favorite animal is a {{selection}}.
</div>
<button class="{{catButtonClass}}" {{action 'selectFavorite' 'Cat'}}>Cat</button>
<button class="{{dogButtonClass}}" {{action 'selectFavorite' 'Dog'}}>Dog</button>
<button class="{{monkeyButtonClass}}" {{action 'selectFavorite' 'Monkey'}}>Monkey</button>
<button class="{{bearButtonClass}}" {{action 'selectFavorite' 'Bear'}}>Bear</button>

templates.components.finished-example.hbs

<div>
	Your favorite animal is a {{selection}}.
</div>
<button class="{{catButtonClass}}" {{action 'selectFavorite' 'Cat'}}>Cat</button>
<button class="{{dogButtonClass}}" {{action 'selectFavorite' 'Dog'}}>Dog</button>
<button class="{{monkeyButtonClass}}" {{action 'selectFavorite' 'Monkey'}}>Monkey</button>
<button class="{{bearButtonClass}}" {{action 'selectFavorite' 'Bear'}}>Bear</button>

templates.components.working-example.hbs

<div>
	Your favorite animal is a {{selection}}.
</div>
<button class="{{catButtonClass}}" {{action 'selectFavorite' 'Cat'}}>Cat</button>
<button class="{{dogButtonClass}}" {{action 'selectFavorite' 'Dog'}}>Dog</button>
<button class="{{monkeyButtonClass}}" {{action 'selectFavorite' 'Monkey'}}>Monkey</button>
<button class="{{bearButtonClass}}" {{action 'selectFavorite' 'Bear'}}>Bear</button>