CODEWITHSUNDEEP
javascriptember.js
J.Fair
J.Fair

Reputation: 15

Toggling between true and false

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
    switch: function(hello){
      if (hello === false) {
        this.set(hello, true);
      } else if (hello === true) {
        this.set(hello, false);
      }  
    }
  }
});

I'm trying to toggle between the false and true options however this always returns false. I need it so that it switches between the two depending on the its current value. I have a button which runs this function. Initially i want it to change from true to false then if its clicked again to change to true etc...

Upvotes: 1

Views: 1556

Answers (4)

J-Cake
J-Cake

Reputation: 1618

you could try this:

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
      switch: (hello) => {
        this.set('hello', (hello ^= 1) == true)
      }
    }
});

Or this: 

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
      switch: (hello) => this.set('hello', !hello)
    }
});

Upvotes: -1

Lux
Lux

Reputation: 18240

I assume you don't really want a parameter for your switch function, but just always toggle the hello property. If yes then do this:

switch() { // here no parameter
  this.set('hello', !this.hello); // dont forget the '' for `this.set`.
}

Upvotes: 1

handlebears
handlebears

Reputation: 2276

Your logic is ok, but the mistake is that you are not actually setting the hello attribute. As written, your code would show an error in the console that would give some clues. Corrected code below, note the quotation marks around 'hello':

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
    switch: function(hello){
      if (hello === false){
        this.set('hello', true);
      } else if (hello === true){
        this.set('hello', false);
      }  
   }
})

In your original code snippet, the value of the hello argument of your action is "true". Therefore your code was saying, this.set(true, false). The this.set method expects to receive the name of a variable as a string and its value.

Also, Ember components have a method called toggleProperty that is helpful here:

import Component from '@ember/component';

export default Component.extend({
  hello: true ,

  actions:{
      switch() {
        this.toggleProperty('hello')
      }
    }
});

Some of the other answers to this question do not (yet) account for the need to use this.set, which is an Ember-specific requirement for observability of variables.

This answer applies from Ember 1.13 through at least 3.x. For versions of Ember less than 3, the import and export lines change, but that's it.

Upvotes: 4

Mr.DeleteMyMessages
Mr.DeleteMyMessages

Reputation: 381

First of all, conditions use ===, !==, ==, etc.

Second, this.set('hello', !hello) requires no If conditions, or anything else.

Explanation:

! is conditional operator. It checks if condition is false, null or undefined.

But you can use it for switching between true and false.

Upvotes: 0

Related Questions