Ember Js Get Array Index Of Clicked Element In An Each Loop, And Filter With It

I am trying to implement the following: My controller returns an array of posts, which fall into a certain category. I am displaying the titles of each of those posts on the left

Solution 1:

You can access the index property in an {{#each}} loop in the following way:

<div class='left-section'>
  {{#each categoryOnePosts as |post index|}}
    <a {{action 'updateFullText' index}}>{{post.title}}</a>
  {{/each}}
</div>

You can then just pass that index value to your action and do whatever you need to from there.

Solution 2:

What I understood from your goal- left side categorised items, right side- first categorised item initially. However if user selects a post to see, then it changes to selection.

| POST 1 category 1| --- content --- |Categorised list 1st item OR Selection of post|

| POST 2 category 1|

Where posts are filtered By some category . for instance category=1

selectedCategory: 1,

categorisedPosts: function() {
    returnthis.get('posts').filterBy("category", this.get('selectedCategory'));
}.property("posts.@each", "selectedCategory"),

This would be the first post initially

 activePost: null, // user has not yet clicked for new post
 activeListItem: function() {
    // 1st post or selected post.return Ember.isPresent('activePost') ? this.get('activePost') : this.get('categorisedPosts').get('firstObject')
  }.property('categorisedPosts', 'activePost')

actions: {
   // Activating new POST to be shown on the rights side.
   updateFullText: function(post) {
     this.set('activePost', post);  
   }
}

---

    <div class='left-section'>
      {{#each categorisedPosts as |post|}}
        <a {{action 'updateFullText' post}}></a>
      {{/each}}
    </div>
    <div class='right-section'>
      {{activeListItem.full_text}}
    </div>