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.

  • Please add whatever you have done till now. That'll help – Santanu Halder Sep 8 '16 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. – CloudHugger Sep 8 '16 at 11:19
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.

  • 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. – CloudHugger Sep 8 '16 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? – Santanu Halder Sep 8 '16 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. – CloudHugger Sep 8 '16 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. – Santanu Halder Sep 8 '16 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. – CloudHugger Sep 8 '16 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.