1

I have an array of objects that I iterate over and for each object I create a child component and pass in the object. I need data-binding so changes made inside the child component can be accessed in the parent.

The following code renders the UI correctly but the data-binding is lost. I read that component.getReference() is used to allow data-binding to aura:attributes. The properties array does come from an aura:attribute but I don't want to pass the child component the whole array if I don't need to.

createChildComponent : function(prop) {
    return ["c:childComponent", {
        "property":prop
    }];        
},
renderProperties : function(cmp, properties) {        
    let definitions = properties
        .map(function(prop){
            return this.createChildComponent(prop);                
        }, this);

    $A.createComponents(
        definitions,
        function(components, status, errorMessage){
            ...
        }
    );
}

Any ideas how to get this to work?

Similar questions

Lightning - dynamically creating element and binding it's attributes

Dynamic field binding in Lightning (e.g. lightning:input)

3

I kept working at it and I found that I can use array indexing in the cmp.getReference() so data-binding is applied correctly.

createChildComponent : function(prop) {
    return ["c:childComponent", {
        "property":prop
    }];        
},
renderProperties : function(cmp, properties) {        
    let definitions = properties
        .map(function(prop, index){
            let ref = cmp.getReference("v.properties[" + index + "]");                
            return this.createChildComponent(ref);                
        }, this);

    $A.createComponents(
        definitions,
        function(components, status, errorMessage){
            ...
        }
    );
}

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.