javascript - Ember js在每个循环中获取单击元素的数组索引，并用它进行过滤

Question

我正在尝试实现以下内容:

1. 我的 Controller 返回一组帖子，这些帖子属于某个类别。我在页面左侧显示每个帖子的标题。
2. 在页面的右侧，我想显示一个区域，仅显示一篇文章的全文。这最初是第一篇文章，但当点击不同的文章标题时会发生变化。

我目前正在尝试在模板中使用两个辅助函数来实现此目的:

模板/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>

我的想法是让“updateFullText”操作获取被单击的帖子的数组索引，然后仅在右侧部分显示与该索引匹配的帖子。

Controller /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);
  },

问题是我无法获取单击项目的数组索引。是否有可能实现这一目标，或者我需要以完全不同的方式来实现这一目标？

Answer 1

您可以通过以下方式在 {{#each}} 循环中访问索引属性:

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

然后，您可以将该 index 值传递给您的操作，并从那里执行您需要执行的任何操作。