2

I have parent class Car:

public class Car {
    @AuraEnabled
    public String model { get; set; }
    @AuraEnabled
    public List<Radio> radios { get; set; }

    public Car( String model, List<Radio> radios ){
        this.model = model;
        this.radios = radios;
    }
}

A child class Radio:

public class Radio {
    @AuraEnabled
    public String frequency { get; set; }

    public Radio( String frequency ){
        this.frequency = frequency;
    }

    public Radio() { }
}

A lightning component:

<aura:attribute name="cars" type="Car"/>

<aura:iteration items="{!v.cars}" var="car">
    <div>
        <p>Car: {!car.model}</p>
        <aura:iteration items="{!car.radios}" var="radio">
            <p>&nbsp;&nbsp;&nbsp;&nbsp; Radio: {!radio.frequency}</p>
        </aura:iteration>
    </div>
</aura:iteration>

<ui:button label="Add Car" press="{!c.addCar}"/>
<ui:button label="Add radio" press="{!c.addRadio}"/>

Component controller:

public class WrappersCont {

    @AuraEnabled
    public static List<Car> getCars(){
        List<String> names = new List<String>{'Mitsubishi','Volvo','Toyota'};
        List<String> radioNames = new List<String>{'MFM','LvivFM','EraFM'};
        List<Car> cars = new List<Car>();
        for( String name : names ){
            List<Radio> radios = new List<Radio>();
            for( String radioName : radioNames ){
                radios.add( new Radio( radioName + '_' + name ) );
            }
            radios.add( new Radio() );
            cars.add( new Car( name, radios ) );
        }
        return cars;
    }

}

And a JS controller for the component:

({
    doInit : function(component, event, helper) {
        var action = component.get( "c.getCars" );
        action.setCallback(this, function(response) {
            debugger;
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var cars = response.getReturnValue();
                component.set( "v.cars", cars );
            }
        });
        $A.enqueueAction(action);
    },

    addCar : function(component, event, helper) {
        debugger;
        var cars = component.get( "v.cars" );
        cars.push( JSON.parse( JSON.stringify( cars[0] ) ) );
        component.set( "v.cars", cars );
    },

    addRadio : function(component, event, helper) {
        debugger;
        var cars = component.get( "v.cars" );
        //cars.push( JSON.parse( JSON.stringify( cars[0] ) ) );
        cars[0].radios.push( JSON.parse( JSON.stringify( cars[0].radios[0] ) ) );
        component.set( "v.cars", cars );
    },

})

And here is my question: If I press addCar it renders a new Object on page. But If i try to add new radio (press "Add radio") to first car it doesn't renders. Did anyone face with such issue? I would be very grateful with any help. Thanks in advance.

  • Out of curiosity, what happens if you start with a non-empty radio set? – JF Paradis Aug 11 '16 at 17:40
1

I suspect that auto rerender is unable to detect this nested change (I have asked the guru of expression binding and auto rerender to comment on this thread too) but I'd first like to eliminate LockerService from the mix. Is LS activated in your org? Is this a Developer Editiin org where you can deactivate the LS critical update yourself and try your scenario with LS removed from the equation? I suspect it will still not auto rerender even with LS deactivated but I'd like to be certain.

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.