[SalesForce] Refresh a jQuery Accordion in a Lightning Component

I am attempting to use jQuery Accordion in a Lightning component.

It uses code like this:

<div id="ticket-event-list">

    <aura:iteration items="{!v.insights}" var="insight" indexVar="indx">
        <div class="event" id="{!'event'+indx}">{!insight.Name}</div>
        <div class="content"> <c:InsightCell insight="{!insight}"/></div>
    </aura:iteration>
</div>

Note that I am trying to respond to changes using:

<aura:handler name="change" value="{!v.insights}" action="{!c.handleValueChange}"/>

In order to refresh the accordion after I update the values like this:

 $("#ticket-event-list").accordion("refresh");

The issue is that the notification seems to be coming before the aura:iteration has finished updating the component. If I use the refresh command in the console after it's rendered incorrectly, I can get it to refresh and show correctly.

Looking at the Chrome Lightning Inspector I see that the event is correctly calling my handleValueChange method, but it seems to be called either in parallel to the iteration, or before it… and I don't seem to have control over the order:

<aura:iteration globalId="378:2;a" items="[4]" var="insight" indexVar="indx" loaded="true" template="[2]" forceServer="false">
c.itemsChange
c.markup://aura:valueChange

<c:InsightList globalId="372:2;a" insights="[4]" omnifocus="true">
c.handleValueChange

Is there some other aura event that gets called after the iteration has finished doing it's thing?

Here are the sources for my list component

Best Answer

Promoting my comment to answer:

I was able to get a hack in place using: 

setTimeout(function () {
   $("#ticket-event-list").accordion("refresh");}, 
   0);

to call my refresh function on the value change event. Note that this is the same as _.defer(). From the underscore docs:

Defers invoking the function until the current call stack has cleared, similar to using setTimeout with a delay of 0. Useful for performing expensive computations or HTML rendering in chunks without blocking the UI thread from updating. If you pass the optional arguments, they will be forwarded on to the function when it is invoked.

So this while this "works", it's not ideal since there can be a brief flash of UI updating. Hopefully aura will gain a "finally after change" event in the future.

Related Topic