Question

我有一个在每个循环内重复的组件。该组件只显示帖子的标题（可能有数百个）。

以下代码成功添加了该类＆＃39;有效＆＃39;到被点击的标题元素。

如何删除课程＆＃39; active＆＃39;单击一个新标题时所有以前的标题（所以只有一个标题让该类有效）？

我最初尝试在控制器上执行此操作，但我无法解决如何在每个循环中的一个实例上设置isActive属性。

Template.hbs：

＆＃13;

{#each posts as |post index item|}}
  {{title-component data=post index=index}}
{{/each}}

＆＃13;

标题-component.hbs：

＆＃13;

<a {{bind-attr class="isActive:active"}}{{action 'setActive' index}}>{{data.title}}</a>

＆＃13;

标题-component.js

＆＃13;

actions: {
  setActive: function(index) {
    this.set('isActive', true);
  },
},

＆＃13;

Answer 1

您可以通过多种方式设置活跃度。但考虑到你已经做了一些工作，我只是稍微改进你的解决方案。您可以在TitleComponent中将isActive属性定义为依赖于＆＃39; activeIndex＆＃39;的计算属性。来自控制器的变量。

因此，定义＆＃39; activeIndex＆＃39;控制器中的属性：

activeIndex: null

然后，在TitleCompoenent中定义isActive属性：

isActive: Ember.equal('activeIndex', 'index')

然后，通过＆＃39;全球＆＃39;变量到每个组件：

{#each posts as |post index item|}}
  {{title-component data=post index=index activeIndex=activeIndex}}
{{/each}}

并在＆＃39; setActive＆＃39;中更改activeIndex值TitleComponent中的动作：

actions: {
  setActive: function(index) {
    this.set('activeIndex', index);
  },
}

P.S。请考虑消灭＆＃39; bind-attr＆＃39;帮手。它很久以前就被弃用了。

Answer 2

因为您为逻辑做了一个解决方法： Ember js get array index of clicked element in an each loop, and filter with it

我基于它积极参与。

updateFullText: function(post) {
     this.set('activePost.isActive', false); // First lose previous activeness

     this.set('activePost', post); // Active post gets re-valuated

     this.set('activePost.isActive', true);  // Activate new item
}




   <div class="left-section">
      {{#each categorisedPosts |as| post}}
        <span class="{{if post.isActive 'activeClass'}}> {{post.description}} </span>
     {{/each}}
   </div>

Ember js控制重复组件中的类绑定

2 个答案: