CODEWITHSUNDEEP
javascriptember.js
nandanself
nandanself

Reputation: 835

Change the image when clicked on it in ember

I a new to ember and trying to figure out a solution.
I have a template which contains images.
When I click on the images it should change the image.

applicaton.hbs

      {{#if feed.is_following}}
      <a href {{action "unfollow" feed}}>
      <img src = "unfollow.png" /></a>
      {{else}}
      <a href {{action "follow" feed}}>
      <img src = "follow.png" /></a>
      {{/if}}

Controller.js

actions:{
    change() {
    src:"unfollow.png"
    },

How do I change the img tag source from follow.png to unfollow and vice-versa when I click on it?

Upvotes: 2

Views: 615

Answers (1)

Miguel
Miguel

Reputation: 20633

Use a computed property. Computed properties get evaluated whenever the provided property changes.

applicaton.hbs

  <a href {{action "change"}}><img src="{{source}}" /></a>

Controller.js

follow: true,
source: Ember.computed('follow', function() {
   return (this.get('follow') ? 'follow' : 'unfollow') + '.png';
}),
actions: {
    change: function() {
       this.toggleProperty('follow');
    }
}

Upvotes: 1

Related Questions