1

I'm trying to solve timing issues with dynamic UI generation.

Using: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_valueChange.htm

I have a component that looks like:

<aura:attribute name="insights" type="List" default="[]" />
<aura:handler name="change" value="{!v.insights}" action="{!c.insightsUpdated}"/>

<aura:iteration items="{!v.insights}" var="insight" indexVar="indx">
   <div class="swiper-slide sizer">
      <c:InsightCell insight="{!insight}" index="{!indx}" />
   </div>
</aura:iteration>

My controller.js code is:

 insightsUpdated : function(component, event, helper) {
    helper.updateInsights(component);
  }

getInsightList: function(component) {
    var action = component.get("c.getInsights");

    //Set up the callback
    var self = this;
    action.setCallback(this, function(actionResult) {
        var results = actionResult.getReturnValue();

        component.set("v.insights", results);
        console.log('setting insights'+results);

    });
    $A.enqueueAction(action);
},

And the helper.js code is:

updateInsights : function (component) {
    var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50,
        pagination: '.swiper-pagination',
        paginationType: 'progress',
        mousewheelControl : true
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50,
    });

},

(I'm using the http://idangero.us/swiper/ Swiper library to make a card-based UI).

This doesn't end up working. What happens is that the "change" event is fired before the aura:iteration completes the DOM update, so when I call new Swiper it doesn't know how many slides there are, and fails to initialize.

Am I using <aura:handler name="change"> wrong? Is there a preferred way of getting notified on an updated after aura:iteration completes?

I have some workarounds, but I feel this is the "right way" to solve this issue.

Thanks!

  • Did you get the solution for this? I am facing same issue. If not, can you tell the workaround? – Sarang Mar 3 '17 at 9:29

Your Answer

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

Browse other questions tagged or ask your own question.