在ember中更改文本颜色，值和图像

Question

我设计了一个Ember应用程序，其中我有照片供稿页面。每张图片都包含一个Like按钮，与文本和值对应。当我点击相似按钮时，它应该像pic，文本颜色和它的值一样变化。它像Facebook一样按钮。我不知道如何在ember中实现它。

feed.js

{{#each feedResult as |feed|}}    
<div class="scale">
           <img id = "image1" src = "{{feed.feedPhotos.0.photo_url}}"/>
           <div class="transhifive">
            {{#if feed.feedPhotos.0.is_liked}}
                <a href = "#" {{action 'unlike'}} >
                   <img  src = "images/ic-unlike-yellow.png">
                   <p>Hi Five! |</p>
                </a>
            {{else}}  
                <a href ="#" {{action 'like'}}>
                   <img src = "images/ic-like-white.png"/>
                   <p>Hi Five! |</p>
                </a>
            {{/if}} 
            <p>{{feed.feedPhotos.0.numlikes}}</p>
</div>
{{/each}}

controller.js

export default Ember.Controller.extend({
     session:service('session'),
     feedResult:Ember.computed('model',function() {

       "SOME MANIPULATION WITH MODEL DATA"

}),
hifive(){
        this.incrementProperty('feed.feedPhotos.0.numFives');
    }
  }
});

我认为这至少会增加类似值，但也会引发错误。

Uncaught Error: Property set failed: object in path "feed.feedPhotos.0" could not be found or was destroyed

我应该如何实现它，使其像Facebook的“赞按钮”一样工作？

Answer 1

1）您需要将要使用的Feed传递给您的操作......

<a href ="#" {{action 'unlike' feed}}>

<a href ="#" {{action 'like' feed}}>

2）将actions哈希添加到您的控制器并编写您不同的功能......

export default Ember.Controller.extend({
     session:service('session'),
     feedResult:Ember.computed('model',function() {
       "SOME MANIPULATION WITH MODEL DATA"
     }),
     hifive(){
        this.incrementProperty('feed.feedPhotos.0.numFives');
     }
     actions {
         like: function(feed) {}
         unlike: function(feed) {}
     }
  }
});

3）在您的like和unlike操作中修改您的Feed值

like: function(feed) {
  //Depending on what is immutable you may need to toy around with how to set these variables
  feed.feedPhotos.0.set('is_liked', true);
  feed.feedPhotos.0.set('numlikes', feed.feedPhotos.0.get('numlikes') +1);

  feed.save();
}

4）重新审视你的观点

 me.rerender()

me需要先在控制器中定义为this