Ember js控制重复组件中的类绑定 [英] Ember js controlling class bindings in repeating component

问题描述

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

下面的代码将类活动成功添加到被点击的标题元素。

如果点击一个新的标题，那么如何从所有以前的标题中删除类活动（所以只有一个标题有活跃的类）？

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

Template.hbs：

  {＃ }} {{title-component data = post index = index}} {{/ each}}  

title-component.hbs：

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

title-component.js

  actions：{setActive：function（index）{this。 set（'isActive'，true）; }，}， 

解决方案

>因为你为你的逻辑做了一个解决方法：
Ember js在每个循环中获取点击元素的数组索引，并使用它进行过滤

我根据它做出了活动。

  updateFullText：function（post）{
 this.set（'activePost.isActive '，假）; //首先丢失以前的活动
 
 this.set（'activePost'，post）; //活动帖子被重新评估
 
 this.set（'activePost.isActive'，true）; //激活新项目
} 
 
 
 
 
< div class =left-section> 
 {{#each categoriesisedPosts | as | post}} 
< span class ={{if post.isActive'activeClass'}}> {{post.description}}< / span> 
 {{/ each}} 
< / div> 
  

I have a component which is repeating inside an each loop. The component simply displays the title of a post (There could potentially be hundreds).

The code below is successfully adding the class 'active' to a title element which is clicked.

How can I remove class 'active' from all previous titles when a new one is clicked (So that only one title ever has the class active)?

I originally tried doing this on the controller, but I couldn't work out how to set the isActive property on one instance in the each loop.

Template.hbs:

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

title-component.hbs:

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

title-component.js

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

解决方案

Since you made a workaround for your logics : Ember js get array index of clicked element in an each loop, and filter with it

I made activeness based on 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控制重复组件中的类绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！