0

I have rendered some lightning component markup dynamically via an iteration loop, and now trying to handle some mouseover/mouseout events.

Due to the dynamic rendering, aura:id is of no use to me - joy.

On mouseover I want to hide one element (ok - I can do this via event.target) but then want to replace it with its presently hidden sibling. In the event handler I get the id of the moused over element ok, but how on earth do I tell lightning to render the sibling element, given I cant reference it by id ? A two minute job in any other framework turning into hours of frustration in lightning...

Any suggestions on approach would be most appreciated.

2
  • Please add whatever you have done till now. That'll help Sep 8, 2016 at 9:41
  • Thanks. I dont have a simplified sample. Dont worry I will seek assistance via local route who can review code in person. Sep 8, 2016 at 11:19

1 Answer 1

1

I dont know what you have done till now. Also your question doesn't tell much about how many siblings can one components have. I am just giving an idea how this can be achieved with a component being rendered inside a iteration loop.

Design a component first, EachRow.cmp. In it, Have a flag attribute

<aura:attribute name="toggleSibling" type="Boolean" default="false"/>

  <div onmouseover="{!c.toggleVisibility}">
        <span>This div will be visible always</span>
       <aura:if isTrue="{!v.toggleSibling}">
              <span>Yay! You did mouse over</span>
       </aura:if>
  </div>

In Controller:

toggleSibling : function(comp, event, helper)
{
component.set('v.toggleSibling', !component.get('v.toggleSibling'));
}

Now in your parent component, iterate and generate the childcomponent as many times you want.

<aura:iteration ...>
    <c:EachRow/>
</aura:iteration>

You can pass dynamic values to show inside EachRow component using an attribute.

6
  • Thanks for your suggestion and apologies my question wasnt specific enough. There could be n rows as is dynamically generated list, and so boolean flag per row doesnt scale. I guess it just boils down to how can I dynamically generate aura:ids without having to use jscript to generate the list, or to iterate over array of components which seems like huge overkill. Sep 8, 2016 at 11:17
  • Having n number of rows is fine, tell me how many siblings that needs to be toggled, do you have per row? Sep 8, 2016 at 11:56
  • Just 1. There are two spans in a div. one always visible and then the other is to be hidden by default and then visible at mouseover event on the parent div, then hidden again on mouseout event. I am thinking I will need to use css parent child styling approach -- manipulation of elements in lightning framework is proving to big a pain in the butt. Sep 8, 2016 at 12:04
  • Well, things becomes easy when you break them into small components. I have updated my answer with a better approach which might be easy to follow if its not too late of course. Sep 8, 2016 at 20:26
  • In the end I didnt use component and aura:if, as the docs suggest for UI manipulation like Im after this approach is not recommended. Instead, I used css to show/hide child elements of a div by applying a class to the parent, which in turn revealed the hidden child component. Thanks again for your input - really appreciated. Sep 8, 2016 at 22:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .