Controller toggle button and message

Questions General
1

Hi guys I am new to Ember and when I toggle the isButtonOn the message does not change, any guidance in the right direction would be appreciated! :slight_smile: //controller/app.js import Ember from ‘ember’;

const { get, set, computed } = Ember;

export default Ember.Controller.extend({ isButtonOn: false,

toggle () { set(this,‘isButtonOn’,!this[‘isButtonOn’]) // this.toggleProperty(‘isButtonOn’) console.log(this.isButtonOn) }, text: computed(function () {

return get(this, 'isButtonOn') ?
  'Message 1 the button is on' :
	'Message 2 the button os off';

}), });

2

Hi @Eddy, welcome to Ember!

First off, just for reference, to format code in here so it looks nice you can wrap it in triple backticks, “`”

As to what’s causing your issue I think it’s the “text” computed property. This is a “classic” computed property whereas the most modern computed properties would use what we call “tracked properties”, negating the need for observing specific properties. However with “classic” computed properties like you are using you need so specify which properties to watch in order to re-compute. I think you want something like this:

text: computed('isButtonOn', function () {
  return get(this, 'isButtonOn') ?
    'Message 1 the button is on' :
	'Message 2 the button os off';
})

The first argument[s] to computed should be the properties to observe. Now the “text” computed property will be recomputed anytime ‘isButtonOn’ changes.

Another thing to note is that, assuming you’re using Ember 3.2 or later, you can use “ES5 getters” instead of get(this, '...'). So your computed property could be as simple as:

text: computed('isButtonOn', function () {
  return this.isButtonOn ? 'Message 1 the button is on' : 'Message 2 the button is off';
})

or even shorter:

text: computed('isButtonOn', function () {
  const on = this.isButtonOn;
  return `Message ${on ? '1' : '2'} the button is ${on ? 'on' : 'off'}`;
})
3

@dknutsen thanks so much for the tips, and the awesome examples to follow. :+1: