CODEWITHSUNDEEP
javascript
Deovandski
Deovandski

Reputation: 790

Ember.js IF statement with OR conditional causing unexpected behaviour

Seems a simple problem, but I just can't figure out why the following code simply won't work...

Regarding gender1:

If I use a computed property and try to check it against a few strings using the conditional OR, the result outputted into the label is always "male/female/other" even if the input gender1 contains one of those...

Regarding gender2:

However, if I do not use the conditional OR and test against only "male", everything works as expected...

Template

<script type="text/x-handlebars" data-template-name="index">
    <label>:</label><br/><br/>
    <div>
        <label>Gender_not_working:</label>
        {{input value=gender1}}
        <label>{{verifyGender1}}</label>
    </div><br/>
    <div>
        <label>Gender_working:</label>
        {{input value=gender2}}
        <label>{{verifyGender2}}</label>
    </div><br/>
  </script>

Controller

App.IndexController = Ember.Controller.extend({
  gender1: "",
  gender2: "",
  verifyGender1: Ember.computed('gender1', function(){
    console.log(this.get('gender1').toLowerCase());
    if(this.get('gender1').toLowerCase() !== "male"||"female")
    {return "male/female/other";}
    else
    {return "MKay";}
  }),
  verifyGender2: Ember.computed('gender2', function(){
    console.log(this.get('gender2').toLowerCase());
    if(this.get('gender2').toLowerCase() !== "male")
    {return "male/female/other";}
    else
    {return "MKay";}
  }),
});

This issue also shows up on the JS Bin that I created...

Upvotes: 0

Views: 40

Answers (1)

Amit
Amit

Reputation: 46323

That's a simple javascript mistake.
You can't compare 1 value to 2 "potential" values like you tried (val1 !== val2 || val3). You can do (val1 !== val2 && val1 !== val3) or ([val2, val3].indexOf(val1) >= 0) and probably a few other ways to achieve the same effect.

Upvotes: 1

Related Questions