0

I have a component structure that can be used like in this example

usage.cmp

<aura:component >
    <c:parent>
        <c:child />
        <c:child />
    </c:parent>
</aura:component>

Where the parent modifies attributes of the childs on init and later on other actions

parentController.js:

({
    init: function(cmp, evt, helper) {
        cmp.get("v.body").forEach(function(child) {
            ...
            child.set("v.css", "stateDependingClass");
        });
    },

    otherAction: function(cmp, evt, helper) {
        cmp.get("v.body").forEach(function(child) {
            ...
            child.set("v.css", "stateDependingClass");
        });
    },
})

parent.cmp:

<aura:component >
    <aura:attribute name="children" type="Aura.Component[]" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <aura:iteration items="{!v.children}" var="child">
        <div class="{!'otherClass ' + child.css}"> <--- THIS DOESN'T GET RERENDERED
            ...
        </div>
    </aura:iteration>
</aura:component>

The problem is that the change in the childs attribute is not reflected in the UI. It not seems to be rerendered.

1

Your local iteration variable "child" is a real component reference and therefore the API for components apply resp. LockerService will enforce it. I think it's not possible accessing attributes in a manner like child.get("v.css") in an expression.

Did I understand it right that you don't want to have the visualization (the div with the class expression) inside the child component - rather you try only using certain kind of data stored in the child without visualizing it? If so, you could create an own array-like attribute in the parent reflecting the order of all your children and storing all kind of data you are interested in the iteration.

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.