Javascript/Ember - Toggle Boolean Value of Variable

Question

I know that there is the .set() method to set a boolean to true or false but I want to know if there a method like .set() except it Toggles the value of a boolean.

In this case the boolean isEditing is being set to 'true'.

isEditing:false,
actions: {
  edit: function(category){
    category.set('isEditing', true);
    console.log(this.get('isEditing'))
  },
}

Here is the html

{{#if isEditing}}
  <div class="category-text"> 
    {{view Ember.TextField valueBinding=name action="turnOffEditMode"}}
  </div>
{{else}}
  <div class="category-text"> 
    {{#linkTo 'category' this}}
      {{name}}
    {{/linkTo}}
  </div>
{{/if}}

score 53 · Accepted Answer · answered Feb 21 '14 at 18:31

53

this.toggleProperty('propertyName');

Edit: jsbin for proof

answered Feb 21 '14 at 18:31

Jake Haller-Roby

6,335
1
18
31

Thank you, gravity. This was what I was looking for, but Rajesh's solution worked as well – Ian Steffy Feb 21 '14 at 19:12
1

This is the most succinct method. – Jason Feb 21 '14 at 21:54
2

He asked if there was a method other than `set` and this is that method. Sorry. – Jason Feb 21 '14 at 22:00
Toggle Boolean Value of Variable what does this mean ? – Triode Feb 21 '14 at 22:01
1

"I want to know if there a method like .set() except it Toggles the value of a boolean" – Jake Haller-Roby Feb 21 '14 at 22:02
2

can you define the method here ? – Triode Feb 21 '14 at 22:02
both solutions are setting isEditing to false I just discovered through console.log. Strangely enough, the content between {{#if isEditing}} and {{else}} is still displaying as if isEditing were true. The weirdest part is that when i use .set to only make isEditing true, it does become true, but the {{#if isEditing}} does not display the code between {{#if isEditing}} and {{else}} anymore. I'm very confused. – Ian Steffy Feb 26 '14 at 18:15

Triode · Answer 2 · 2014-02-22T11:36:20.360

4

isEditing:false,
actions: {
    edit: function(category){
        category.set('isEditing', !category.isEditing);
        console.log(this.get('isEditing'))
    }
    toggleEditing : function(category){
    }
}

Toggling the boolean value is what you need. Or yu can change your function like below.

isEditing:false,
actions: {
    toggleEditing : function(category){
        category.set('isEditing', !category.isEditing);
        console.log(this.get('isEditing'));
    }
}

edited Feb 22 '14 at 11:36

answered Feb 21 '14 at 18:20

Triode

11,309
2
38
48

category.set('isEditing', !isEditing); results in "Uncaught ReferenceError: isEditing is not defined " – Ian Steffy Feb 21 '14 at 18:22
2

Why this got down voted ? Would be great if you could provide a reason – Triode Feb 21 '14 at 18:37
1

I voted this and your previous comment UP. I don't have enough rep to vote down. To reiterate to the haters, THIS SOLUTION WORKED. ;) – Ian Steffy Feb 21 '14 at 19:11
7

this.toggleProperty is better for this cases. I think the answer from @gravityplanx is better. – Miguel Madero Feb 23 '14 at 04:19
4

Also if you were going to do it explicitly, you need to use get instead of getting the value directly `category.set('isEditing', !category.get('isEditing'))` – Miguel Madero Feb 23 '14 at 04:20

score 1 · Answer 3 · answered Jun 30 '17 at 17:46

1

@gravityplanx's answer is great.

I just want to add that this methodology works beyond the controller as well.

For example, if my Model has a Post object, I can update it from the controller. I just have to pass the object into a controller action.

switch_readiness(post) {
    post.toggleProperty('isPublishReady');
}

answered Jun 30 '17 at 17:46

Cameron

2,805
3
31
45

1

`toggleFood(food) { food.toggleProperty('available') }` - doesn't really work for me... seems like @gravityplanx picked out one small part of the question and answered it - but not in the context. – sheriffderek Aug 03 '17 at 06:30

Javascript/Ember - Toggle Boolean Value of Variable

3 Answers3