javascript - 在 ember 中单击时更改图像

Question

我是 ember 新手，正在尝试找出解决方案。
我有一个包含图像的模板。
当我点击图像时，它应该改变图像。

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"
    },

如何在点击时将 img 标签源从 follow.png 更改为 unfollow，反之亦然？

Answer 1

使用 computed property 。每当提供的属性发生更改时，就会评估计算属性。

应用程序.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');
    }
}