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 hand side of the page.
On the right side of the page, I would like to display an area where the full text of only one post displays. This would be the first post initially, but would change when a different post title is clicked.

I am currently trying to achieve this using two each helpers in my template:

templates/posts.hbs

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

My idea is to for the 'updateFullText' action to get the array index of a post which is is clicked, and then display only the post which matches that index in the right hand section.

controllers/posts.js

categoryOnePosts: function() {
    var allPosts = this.get('posts');
    var categoryOne = posts.filterBy("category", 1);
    return categoryOne;
  }.property("posts.@each"),

  currentPostFullText: function() {
    var currentPostIndex = this.get('currentPostIndex');
    var categoryOne = this.get('categoryOnePosts');
    var thisPost = //Set thisPost to only include the object at position 'currentPostIndex' in the categoryOne array.
    return thisPost;
  }.property("categoryOnePosts', 'currentPost'),

  actions: {
    var clickedPostIndex = //Get the array index of the clicked item.
    this.set('currentPostIndex', clickedPostIndex);
  },

Problem is I can't manage to get the array index of the clicked item. Is it possible to achieve this, or would I need to go about this in a completely different way?

回答1:

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() {
    return this.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>

回答2:

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.

来源：https://stackoverflow.com/questions/33079346/ember-js-get-array-index-of-clicked-element-in-an-each-loop-and-filter-with-it

标签

javascript

ember.js