Lightning - dynamically creating element and binding it's attributes

Question

I'm trying out to generate input elements dynamically and wasn't able to bind value attribute.

I getting following error when trying to display component:

testDynamicBinding.cmp

<aura:component description="testDynamicBinding">
    <aura:attribute name="testAttr" type="String" default="Hello World"/>

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

    {!v.body}

</aura:component>

testDynamicBindingController.js

({
    doInit: function(cmp){
        $A.createComponent(
            'ui:outputText',
            {
                value: '{!v.testAttr}'
            },
            function(element, status, errorMessage){
                if (cmp.isValid() && status == 'SUCCESS'){
                    var body = cmp.get('v.body');

                    body.push(element);

                    cmp.set('v.body', element);
                }

            }
        );
    }
})

I don't understand why it gives me this error.

I tried following code (I think it's equivalent to what I try to generate) and that works fine.

<aura:component description="testDynamicBinding">
    <aura:attribute name="testAttr" type="String" default="Hello World"/>

    <aura:set attribute="body">
        <ui:outputText value="{!v.testAttr}"/>
    </aura:set>

</aura:component>

Any piece of advice would be appreciated.

Thanks a lot in advance.

vignesh · Accepted Answer · 2016-11-21 11:08:54Z

17

1.In controller u need to get attribute reference value using cmp.getReference("v.testAttr")

2.And set the value to ui:output text

**

({
    doInit: function(cmp){
        var test = cmp.getReference("v.testAttr");
        $A.createComponent(
             'ui:outputText',
            {
                value: test
            },
            function(element, status, errorMessage){
                if (cmp.isValid() && status == 'SUCCESS'){
                    var body = cmp.get('v.body');
                    body.push(element);
                    cmp.set('v.body', element);
                }
            }
        );
    }
})

**

answered Nov 21, 2016 at 11:08

vignesh

2,65413 silver badges22 bronze badges

Thanks mate, It works. I've come around getReference, but haven't googled use cases of it.

ytiq
– ytiq

2016-11-21 11:20:50 +00:00
Commented Nov 21, 2016 at 11:20
Guys, just to confirm, cmp.getReference allows me to set 2-way data binding when I create components dynamically using $A.createComponent?? If Yes, this is simply GREAT!

patryk
– patryk

2018-06-09 19:32:06 +00:00
Commented Jun 9, 2018 at 19:32

Add a comment |

Stack Exchange Network

Lightning - dynamically creating element and binding it's attributes

1 Answer 1

You must log in to answer this question.

Linked

Hot Network Questions

Lightning - dynamically creating element and binding it's attributes

1 Answer 1

You must log in to answer this question.

Linked

Related

Hot Network Questions