How to data-bind to an array element to pass to a dynamically created component?

Question

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)

Answer 1

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){
            ...
        }
    );
}