CODEWITHSUNDEEP
javascriptember.jshandlebars.js
PW Kad
PW Kad

Reputation: 14995

Using conditional statement in bind-attr Handlebars Ember.js

How can I use a conditional statement inside my Handlebars template with limited results. I can get it to work fine if there is only one button that is clicking because it is static then but when I test against two buttons no dice - 

<a {{bind-attr class="isClicked:clicked"}} {{action 'raiseValue'}}><i class="fa fa-caret-up"></i></a>
<a {{bind-attr class="isClicked:clicked"}} {{action 'lowerValue'}}><i class="fa fa-caret-down"></i></a>

And in my controller - 

selected: '', 
isClicked: function (sender) {
    return this.get('selected') === sender;
}.property('selected'),
actions: {
    raiseValue: function() { this.set('selected', 'raise'); }
}

What I would expect to happen -

When the value of clicked changes it would pass that in to my anon function and return whether the value of clicked === the clicked value of the object passed in.

What does happen

sender === 'isClicked' in that scenario

I have tried using a conditional statement in the binding but that isn't working at all - 

<a {{bind-attr class="(isClicked === 'raise'):clicked"}} {{action 'raiseValue'}}><i class="fa fa-caret-up"></i></a>

Basically I am trying to mimic how a radio button works I guess... Any thoughts as to what is going wrong here?

Upvotes: 0

Views: 2045

Answers (1)

chopper
chopper

Reputation: 6709

You cannot pass in parameters into a computed property like that. The simples solution is to split it like this: 

isRaiseClicked: function () {
    return this.get('selected') === "raise";
}.property('selected'),

isLowerClicked: function () {
    return this.get('selected') === "lower";
}.property('selected'),

<a {{bind-attr class="isRaiseClicked:clicked"}} {{action 'raiseValue'}}><i class="fa fa-caret-up"></i></a>
<a {{bind-attr class="isLowerClicked:clicked"}} {{action 'lowerValue'}}><i class="fa fa-caret-down"></i></a>

Upvotes: 2

Related Questions