Question

我正在尝试实施以下内容：

我的控制器返回一系列帖子，这些帖子属于某个类别。我正在页面左侧显示每个帖子的标题。
在页面的右侧，我想显示一个只显示一个帖子的全文的区域。这将是最初的第一篇文章，但是当点击不同的帖子标题时会发生变化。

我目前正在尝试使用模板中的两个帮助程序实现此目的：

模板/ 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'动作获取单击的帖子的数组索引，然后在右侧部分仅显示与该索引匹配的帖子。

控制器/ 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值传递给您的操作，并从那里做任何您需要的操作。

Answer 2

我从你的目标中理解 - 左侧分类的项目，右侧 - 最初的分类项目。但是，如果用户选择要查看的帖子，则会更改为选择。

<强> | POST 1类别1 | ---内容--- |分类列表第1项或选择帖子

<强> | POST 2类别1 |

过滤帖子的某些类别。例如category = 1

selectedCategory: 1,

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

这将是最初的第一篇文章

 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>

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

2 个答案:

<强> | POST 2类别1 |