CODEWITHSUNDEEP
javascriptember.js
Tom
Tom

Reputation: 1565

Ember using computed property as an action parameter

I'm building an app to be used on iOS and desktop. I need to add the on="eventType" parameter to some actions, and use mouseUp for desktop and touchEnd for mobile. I can't seem to add both like on="eventOne eventTwo" so I tried doing it as a computed property, but it doesn't seem to work:

<a {{action 'selectTab' 'location' on=clickEvent}} class="{{if locationSelected 'active'}}"><span class="mi-person"></span></a>
<a {{action 'selectTab' 'portfolios' on=clickEvent}} class="{{if portfolioSelected 'active'}}"><span class="mi-movie"></span></a>

export default Ember.Component.extend({
    session: Ember.inject.service(),
    clickEvent: Ember.computed('session.isCordova', function() {
        return this.get('session.isCordova') ? 'touchEnd' : 'mouseUp';
    }),
    actions: {
        selectTab:function(tab){
            console.log("TAB SELCTED");
            alert("TAB SELCTED");
            this.set('selectedTab', tab);
        }
    }
}

My other option is to duplicate it with an if statement, but I'd rather have an elegant solution.

Upvotes: 1

Views: 76

Answers (2)

Jordan Morano
Jordan Morano

Reputation: 66

You can take advantage of inline handlebars helpers and write your code this way rather than a computed property. 

<a {{action 'selectTab' 'location' on=(if session.isCordova 'touchEnd' 'mouseUp')}} class="{{if locationSelected 'active'}}"><span class="mi-person"></span></a>

Upvotes: 1

Josu&#233; Pech
Josu&#233; Pech

Reputation: 194

You can add both event types to your element, It will look like this:

 <a {{action 'selectTab' 'location' on='touchEnd'}} {{action 'selectTab' 'location' on='mouseUp'}} class="{{if locationSelected 'active'}}">
      <span class="mi-person"></span>
    </a>
 <a {{action 'selectTab' 'portfolios' on='touchEnd'}} {{action 'selectTab' 'portfolios' on='mouseUp'}} class="{{if portfolioSelected 'active'}}">
   <span class="mi-movie"></span></a>


Source: Multiple actions in a single element

Upvotes: 2

Related Questions