Ember Js Controlling Class Bindings In Repeating Component

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 a

Solution 1:

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 activenessthis.set('activePost', post); // Active post gets re-valuatedthis.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>

Solution 2:

You could set activeness in many ways. But considering you already done some work, I'll just slightly improve your solution. You can define isActive property in TitleComponent as computed property that depends on 'activeIndex' variable from controller.

So, define 'activeIndex' property in controller:

activeIndex:null

Then, define isActive property in TitleCompoenent:

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

Then, pass the 'global' variable to each component:

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

And change activeIndex value in 'setActive' action in TitleComponent:

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

P.S. Please, consider to wipe out 'bind-attr' helper. It's been deprecated a long ago.